Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] Use full width image on mobile

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Use full width image on mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22921
    Hilton
    Participant

    Hi,

    I would like to know if there is any way to make the images on mobile stay 100% wide.

    For example, the desktop version of this page here https://bit.ly/2IZXEBz is ok. But when we see its mobile version, the ideal would be for the images to get bigger, filling the total width of the screen https://prnt.sc/vnod9v

    Thanks

    #22950
    David Beckwith
    Participant

    Hi there,

    try adding this CSS:

    @media(max-width: 768px) {
        .wp-show-posts-image img {
            width: 100%;
        }
    }
    #22959
    Hilton
    Participant

    Hi David,

    The problem is that I wanted the images to be small on the desktop, so I put a fixed size in the plugin as you can see here https://prnt.sc/vojnnq. So, it looks like this https://prnt.sc/vojpdt

    When using this CSS, images that were smaller on the desktop are blurry on the mobile because it seems that they are stretched from that size configured in the plugin, as you can see here https://prnt.sc/vojq0r

    Thanks

    #22962
    Hilton
    Participant

    Hi David,

    It was good using this css below as you can see here http://bit.ly/2Vu9HYe

    @media(min-width: 768px) {
    #wpsp-80913 .wp-show-posts-image.wpsp-image-left, #wpsp-80914 .wp-show-posts-image.wpsp-image-left {
    width: 130px;
    height: 130px;
    position: relative;
    overflow:hidden;
    }
    #wpsp-80913 img, #wpsp-80914 img, #wpsp-80924 img, #wpsp-80899 img, #wpsp-80895 img, #wpsp-80891 img {
    position: static;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
    }

    #wpsp-80924 .wp-show-posts-image.wpsp-image-left, #wpsp-80899 .wp-show-posts-image.wpsp-image-left {
    width: 200px;
    height: 150px;
    position: relative;
    overflow:hidden;
    }

    #wpsp-80895 .wp-show-posts-image.wpsp-image-left {
    width: 150px;
    height: 150px;
    position: relative;
    overflow:hidden;
    }
    #wpsp-80891 .wp-show-posts-image {
    width: 230px;
    height: 200px;
    position: relative;
    overflow:hidden;
    }
    }

    #22965
    elvin
    Participant

    Hi,

    The problem is that I wanted the images to be small on the desktop, so I put a fixed size in the plugin as you can see here https://prnt.sc/vojnnq. So, it looks like this https://prnt.sc/vojpdt

    When using this CSS, images that were smaller on the desktop are blurry on the mobile because it seems that they are stretched from that size configured in the plugin, as you can see here https://prnt.sc/vojq0r

    To clarify: You seem to be asking to have a higher size/quality of image in mobile?

    See Tom’s answer here: https://wpshowposts.com/support/topic/different-image-sizes-for-desktop-mobile/#post-22265

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