[Resolved] Managing Photos on Mobile to Stretch the Container Width

Home Forums Support Managing Photos on Mobile to Stretch the Container Width

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1467672
    Mark

    On mobile-only, is there a way to make my added media images in the body of posts stretch the container? I create all of my post images and they will eventually be the same size. Please see the example post on mobile below and you’ll see how the non-featured image just misses the left-hand side. Thanks

    #1468132
    Leo
    Staff
    Customer Support

    Hi Mark,

    That’s strange. I’m seeing a weird margin-right but not sure where it’s coming from.

    Are you able to disable all plugins except GP Premium and GB and let me have a closer look?

    Thank you!

    #1468228
    Mark

    They’re still disabled. The photos are right-justified when on desktop.

    #1468260
    Elvin
    Staff
    Customer Support

    Hi Mark,

    You can try bypassing the default styling WordPress adds on its alignright by adding !important.

    Example:

    @media (max-width:768px){
    .wp-block-image img {
        width: 100%;
    		height: auto;
    }
    }
    
    @media (max-width: 768px){
    .wp-block-image > .alignleft, .alignright {
        float: none !important;
        margin: 0em !important;
    }
    }

    This code removes the default float: right; and margin: .5em 0 .5em 1em; by WordPress’ .alignleft, .alignright classes.

    A wise man once said:
    "Have you cleared your cache?"

    #1468883
    Mark

    Worked perfectly.

    #1468961
    Mark

    Is there a way for this only to happen on a phone and not on a tablet?

    #1469008
    David
    Staff
    Customer Support

    Hi there,

    in the CSS provided you can 2 x instances of 768px reduce this value to 600px

    #1469595
    Mark

    Awesome. Thanks!

    #1470291
    David
    Staff
    Customer Support

    Glad we could be of help

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