[Resolved] 2 column on tablet width masonry layout

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support 2 column on tablet width masonry layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #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

    #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

    #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.

    #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.

    #29259
    elvin
    Moderator

    Nice one. Glad it worked for you.

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

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