One column in tablet – WP Show Posts

Tagged: responsive

This topic has 6 replies, 2 voices, and was last updated 2 years, 2 months ago by David Beckwith.

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

Author

Posts
December 29, 2020 at 6:35 am #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

December 29, 2020 at 8:04 am #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
December 29, 2020 at 11:30 am #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

December 29, 2020 at 11:38 am #24749

Ricardo
Participant

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

Thank you

December 30, 2020 at 10:47 am #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;
}
```
December 30, 2020 at 12:01 pm #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

December 30, 2020 at 4:28 pm #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.
Author

Posts

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

You must be logged in to reply to this topic.

[Support request] One column in tablet