Home › Forums › Pro Support › 2 column on tablet width masonry layout
- This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by
elvin.
-
AuthorPosts
-
April 13, 2021 at 4:31 am #29206
Gloria
ParticipantHi,
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 #29234elvin
ModeratorHi 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/38April 13, 2021 at 11:01 pm #29236Gloria
ParticipantHi 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: Mer1234April 13, 2021 at 11:16 pm #29238elvin
ModeratorI 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 #29241Gloria
ParticipantHi 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 #29259elvin
ModeratorNice one. Glad it worked for you.
Feel free to open new topics if you have any other questions. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.