[Resolved] Full width image on mobile

Home Forums Support Full width image on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1496229
    Jatin

    Hi Guys,

    I want to have full width image when someone visits my site from mobile phone, you can see the image is left aligned with a gap on the right hand side. Can you please advice if there is a way to make it use the full space. Site link in the box.

    #1496259
    Elvin
    Staff
    Customer Support

    Hi,

    You can try going to Appearance > Customize > Layout > Blog and make sure the width and height are blank as shown here. https://share.getcloudapp.com/2NujPd1D

    Make sure you publish changes you made and check if it applies on the live site.

    Additional note: If the image size is too small to go full container width, you may have to force it by css.

    .post-image img{
    width:100%;
    }

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

    #1496663
    Jatin

    Hi Elvin, Thanks for the suggestion. I have set the Width and Height for Archive Pages to 300 x 200 which is fine on the desktop. But I wanted to only change this for mobile. I do not want to change the width and height for Desktop Featured Images.

    I tried to above code as well but this had no affect on the mobile phone Featued Image, I am not using any Cache Plugin.

    #1496710
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Layout > Blog –> Featured Images >> Archives – set the Media Attachment to Full and remove any values you have set in the Width and Height.

    Then add this CSS to your site:

    @media(max-width: 768px) {
        .post-image img {
            width: 300px;
            height: 200px;
            -o-object-fit: cover;
            object-fit: cover;
        }
    }
    #1496915
    Jatin

    Didn’t work. Its Applied and when i removed width and height from the Customizer > Layout > Blog –> Featured Images >> Archives page my desktop Archive Page Featured image is not consistent as you can see by visiting my site.

    Archive Featured Image Settings
    Media Attachment set to Full
    Width and Height settings removed.
    CSS Code Applied.

    #1497196
    David
    Staff
    Customer Support

    Did you set the Media Attachment to Full ?

    #1497208
    Jatin

    Yep.correct

    #1497586
    Elvin
    Staff
    Customer Support

    That’s strange.

    A simple width:100% should work as shown here:
    https://share.getcloudapp.com/6quPvyw2

    Perhaps there’s a CSS conflict somewhere in the CSS code prevents this from working.

    Can you check your CSS codes if you something that uses the same selectors? ( .post-image img or .post-image > a > img )

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

    #1497962
    Jatin

    This is all the code i have when i searched in Simple CSS for .post-image

    .post-image {
    position: relative;
    }


    @media
    (max-width: 768px) {
    body:not(.single-post) .inside-article .post-image {
    text-align: justify;
    }
    }


    @media
    (max-width: 768px) {
    .post-image img {
    width: 300px;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    }
    }

    #1498035
    Elvin
    Staff
    Customer Support

    Ah I see.

    You can try modifying David’s code a bit.

    Try this out:

    @media(max-width: 768px) {
    .post-image img {
    width: 100% !important;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    }
    }

    Let us know if it works for you.

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

    #1498052
    Jatin

    Works fine now. Thanks Elvin.

    #1498882
    Elvin
    Staff
    Customer Support

    Good to know. No problem. πŸ™‚

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

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