issue PC view vs mobile view

[LorSmi]

This just came to my attention. The desktop view of this page is correct but the mobile view is not. It never was an issue before – can anyone help me fix this?

Thanks!

Good Shepherd Pre-School

 

 

[Weaver]

What do you think is wrong? Looks exactly as I would expect when I look.

[LorSmi]

On my iphone, right where the three colored handprints are, the text starts, “established in 1988…”   Right there. The word established is on the left hand side and appears to be in a column of one or two characters only in width. Then, after 1988, the text looks normal. sctolling down some more, the words “Classes offfered” – same thing, only on the right side but a few more characters on each line. And the same thing again down further. It seems to happen when the text is next to an image. I just don’t know how to fix it.

[LorSmi]

To be more speific, the word Established looks like this on my phone;

E

st

a

bli

s

h

e

d

in

 

[User]

@LorSmi

On the phones, the image are not reducing in size as fast as the available width has reduced, due to screen size, so the phones are giving less space to the text.

That is causing the narrow strip of text to the left of right-aligned images and to the right of left-aligned images.

One option is to make the images slightly larger, so that they will automatically display full-width on phones, or to make them smaller, so there is more space at the sides for the text.

If this site is not brand new, you may be able to check the site stats to see the ratio of desktop : mobile users, to help you decide which group of users to optimize for visually.

My feeling is that you need to make the in-content images smaller if you want to have them display in the same general appearance as the desktop, or slightly large to make life easier…. and they will appear full width on most phones.

Personally, I try to keep my in-content images to less than 200 wide, but the best appearance is 100 for all phones. Else the narrow text looks silly and may become unreadable.

Hope this helps.

Regards!

[scrambler]

I explained how to deal with that issue of image with wrapped text in the guide article below under the section titled

Make any Right/Left floated image be cleared on mobile

Posts: Changing Featured Image Layout on Mobile – Weaver Xtreme Guide (weavertheme.com)

I can give you specific CSS, but you need to add a class to the image so we can create a CSS rule that will change its float:right to float:none on phones

[LorSmi]

I’m going to try to see if I nudge the pics a bit smaller first. I think that might be the easiest for me. I’d like to keep the  desktop layout the same. We’ll see!

[scrambler]

The issue is actually with pretty much all the images on that page.

So if you add the rule below to the theme Global Custom CSS rule box, it will prevent the text from wrapping around them on phones and only on phones (desktop and tablet will remain the same)

.is-phone.page-id-3557 #content img.alignleft, .is-phone.page-id-3557 #content img.alignright {display:block !important; float:none !important;margin:0 auto !important;}

 

[LorSmi]

I will try it first thing in the morning!

[LorSmi]

Okay, where is the Global Custom CSS rule box? I haven’t messed with this page in a long time and I am not as familiar with Weaver as I use to be…

[LorSmi]

Oh, I found it, and it worked! Thank you!

[Author]

Posts