Home Forums Weaver Xtreme Theme Images Not Responsive on Mobile

Topic Resolution: Resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Miriam 3 weeks, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #51580

    Miriam
    Participant

    I’ve started updating the images in my prior blog posts so that they go better with my new full width format.and I’ve noticed that some of the images are not sized responsively on my phone.

    For example: On this test site page, http://mirsites.com/test-joyrenc/create-your-vision-for-2017/

    the two square images within the blog post look great on my desktop monitor, but strange on my phone. They are not quite wide enough to fill the width of my phone screen, so a few letters of text appear beside them in a way that is not readable.

    Can you offer a suggestion to fix this?

    Thanks!

    (I have the latest Weaver Xtreme, Support Plugins, WordPress)

    #51581

    scrambler
    Moderator

    I have an article below explaining how to optimize the layout on mobile when the FI is too big compared to the text.

    https://guide.weavertheme.com/posts-changing-featured-image-layout-on-mobile/

    Let me know if you need more help after checking it out 🙂

    #51582

    Miriam
    Participant

    Thanks @scrambler. I will study the article. But my featured image works perfectly.  It’s the two images within the blog post are showing the narrow column of text.

    #51583

    scrambler
    Moderator

    The article also explain how to fix the problem on manually inserted images 🙂

    Check the section named: Make any Right/Left floated image be cleared on mobile

    #51585

    Miriam
    Participant

    Oops, I wrote a post, then edited it and submitted it and it disappeared. I will rewrite.

    @scrambler, that article was very helpful, thanks! I put the CSS rules as you described in Weaver Admin>Main Options>Fonts & Custom>Custom CSS Rules.

    .is-phone img.my-img-clear {  …

    The phone view is working fine now. Thank you.

    ===

    The third image within the same blog post has a column of narrow text beside it on both the desktop and my large tablet (Samsung T800).

    I adapted the CSS rules, as follows, but it didn’t work on either my tablet or my desktop:

    .is-mobile img.my-img-clear {
    display:block !important;
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    } /*a new class for images on the tablet to float without narrow columns of text on either side */

    .is-desktop img.my-img-cleardesk {
    display:block !important;
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    } /*a new class for images on the desktop to float without narrow columns of text on either side */

    Can you see what I’m doing wrong?

    Thanks!

    #51586

    scrambler
    Moderator

    You created a style for the class my-img-cleardesk  , but actually added the other class (my-img-clear) to the image 🙂

    In addition the styling would only affect desktop, but not small tablets.

    That said, if you don’t want the text to wrap to the side of that image on all devices, the easiest way to do that, is to Add the image as centered (using the WP Add Media), instead of right aligned.

    When you insert an image as centered, it will automatically be centered with the text below it. So no need to bother with the class business

    #51587

    Miriam
    Participant

    Ooops, you are right. Too many back-to-back changes.

    Centering with WP Add Media did the trick.

    Thanks @scrambler!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.