2 column on tablet width masonry layout

Tagged: columns, masonry, tablet

This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by elvin.

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

Author

Posts
April 13, 2021 at 4:31 am #29206

Gloria
Participant

Hi,
I have found other threads on the forum about showing posts in 2 columns on tablets. I tried the suggested css codes, but none worked.

I think it depends on the fact that I have set up a masonry type layout.

How can I display my posts in 2 columns on tablet only?

Hint: it would be nice to be able to choose how many columns to show on tablet from the plugin options. Thanks

April 13, 2021 at 10:52 pm #29234

elvin
Moderator

Hi there,

I have found other threads on the forum about showing posts in 2 columns on tablets. I tried the suggested css codes, but none worked.

I think it depends on the fact that I have set up a masonry type layout.

How can I display my posts in 2 columns on tablet only?

Can you share us the CSS you’ve used and the link to the page you’re working on? To help out with any correction on the CSS writeup.

Hint: it would be nice to be able to choose how many columns to show on tablet from the plugin options. Thanks

I’ve opened a feature request here. It’s up to Tom now if and when it gets implemented. 🙂
https://github.com/tomusborne/wp-show-posts/issues/38

April 13, 2021 at 11:01 pm #29236
Gloria
Participant
Hi Elvin,
thank you for your reply.
The css code I tried is this:
```
@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:50%
    }

    .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: 50%;
        max-width: unset;
        object-fit: unset;
    }
}
```
Link to the page: https://nuovameridianasrl.it/
Frontend Pass: Mer1234
April 13, 2021 at 11:16 pm #29238
elvin
Moderator
I see,

On this part of the CSS:
```
.wp-show-posts-columns .wp-show-posts-single {
        display: block;
        width:50%
    }
```
Can you try changing it to this?
```
.wpsp-col-4 {
        display: block;
        width:50%
    }
```
Let us know how it goes.
April 14, 2021 at 2:41 am #29241

Gloria
Participant

Hi Elvin,
it work! Thank you.

I need to fix the size of the featured images, but I’ll try it myself first.

Thanks again.

April 14, 2021 at 4:18 pm #29259

elvin
Moderator

Nice one. Glad it worked for you.

Feel free to open new topics if you have any other questions. 🙂
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] 2 column on tablet width masonry layout