We're merging with GenerateBlocks! Learn more here.

[Support request] One column in tablet

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support One column in tablet

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24727
    Ricardo
    Participant

    Hi,

    In this page:

    https://wordpress-89823-1605306.cloudwaysapps.com/

    I’m displaying 3 columns.

    In tablet it’s displaying 3 columns also. In mobile only 1 (full container width).

    Is it possible to have 1 column full container width in tablet also?

    How can I achieve that?

    Thanks,
    Ricardo

    #24738
    David Beckwith
    Participant

    Hi there,

    try adding this CSS:

    @media (max-width: 1024px) {
        .wp-show-posts-columns, .wp-show-posts-inner {
            margin-left: 0 !important;
            margin-right:0 !important
        }
    
        .wp-show-posts-columns .wp-show-posts-single {
            display: block;
            width:100%
        }
    
        .wp-show-posts-image.wpsp-image-left, .wp-show-posts-image.wpsp-image-right {
            float: none;
            margin-right: 0;
            margin-left:0;
        }
        .wp-show-posts-image img,
        .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img{
            width: 100%;
            max-width: unset;
            object-fit: unset;
        }
    }

    Change the 1024px in this line: @media (max-width: 1024px) to adjust when you want it to display 100% columns

    #24746
    Ricardo
    Participant

    Hi,

    Thank you very much for your reply.

    It worked, but since I have set the images to be 450×450, it doesn’t deliver a nice result on tablet.

    If it’s not an abuse, if that is possible, could you help me understanding how to adjust the image height and width for tablet with some css?

    Best regards,
    Ricardo Pons

    #24749
    Ricardo
    Participant

    P.S: I just need to adjust image height, not width.

    Thank you

    #24778
    David Beckwith
    Participant

    Try changing this:

    .wp-show-posts-image img,
    .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
        width: 100%;
        max-width: unset;
        object-fit: unset;
    }

    TO:

    .wp-show-posts-image img,
    .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
        width: 100%;
        max-height: 450px;
        max-width: unset;
        object-fit: cover;
    }
    #24781
    Ricardo
    Participant

    Thank you!

    This css does the trick, but the images are losing a lot of quality (like it was stretched). Is there anyway to avoid this?

    Best regards,
    Ricardo

    #24791
    David Beckwith
    Participant

    Unfortunately not as they are being ‘stretched’ apart from uploading a much large image to begin with which could be detrimental to performance – you could minimize that happening by changing the @media query from 1024px to a smaller value eg. 769px then the stacking would only occur on the smaller tablet devices.

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