Home Forums Weaver Xtreme Theme issue PC view vs mobile view

Topic Resolution: Resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #73851
    LorSmi
    Participant

    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

     

     

    #73852
    Weaver
    Keymaster

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

    #73853
    LorSmi
    Participant

    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.

    #73854
    LorSmi
    Participant

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

    E

    st

    a

    bli

    s

    h

    e

    d

    in

     

    #73856
    User
    Participant

    @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!

    #73858
    scrambler
    Moderator

    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

    #73861
    LorSmi
    Participant

    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!

    #73862
    scrambler
    Moderator

    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;}

     

    #73863
    LorSmi
    Participant

    I will try it first thing in the morning!

    #73866
    LorSmi
    Participant

    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…

    #73867
    LorSmi
    Participant

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.