[Support request] Wp Show Posts display 2 columns in mobile

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Wp Show Posts display 2 columns in mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #19205
    Lorenzo
    Participant

    Hi, I am using Cards from Wp Show Posts beta version. I see that in Mobile Version 2 columns and 3 columns grids become 1 single column. May you suggest css for having 2 columns and 3 columns in mobile version also?
    Thanks

    #19224
    Tom
    Keymaster

    Hi there,

    It’s possible, but it would require CSS right now. Feel free to link us to your site and we can take a look 🙂

    #19281
    Lorenzo
    Participant

    Hi, I provided the linkas private in this discussion on Generatepress forum: https://generatepress.com/forums/topic/wp-show-posts-display-2-columns-in-mobile/#post-1438392

    #19364
    Lorenzo
    Participant

    Hi this is the link: https://www.staging4.viaggi-usa.it/bozza-home-page/

    you can se find many posts lists,I would be grateful if you help me with css for the first 2. Thanks

    #19436
    Tom
    Keymaster

    You could try something like this:

    @media (max-width: 768px) {
        #wpsp-57068.wp-show-posts-columns .wp-show-posts-single {
            width: 50%;
        }
    
        #wpsp-57068.wp-show-posts-columns {
            margin-left: -2em !important;
        }
    
        #wpsp-57068.wp-show-posts-columns .wp-show-posts-inner {
            padding-left: 2em;
        }
    }

    You can add as many selectors to each block as you need, you just need to update the list ID for each one.

    Alternatively, give the lists a custom class like two-column-mobile and use that .two-column-mobile in place of #wpsp-57068.

    #19541
    Lorenzo
    Participant

    thanks

    #19583
    Tom
    Keymaster

    No problem 🙂

    #27323
    Anas
    Participant

    Hi Tom,

    I found this post while I was looking for a similar solution. I tried the suggested code but in my case, all of my posts appeared in one long column that occupies only 50% of the space, as you can see in this screenshot: http://prnt.sc/105xtgr

    Any suggestions? Thanks

    #27328
    elvin
    Moderator

    Hi there,

    Can you link us to the page in question to check? You can send it through our contact page if you wish to keep it private: https://wpshowposts.com/contact/

    #27357
    Anas
    Participant

    I sent the link through the contact form. Thanks.

    #27400
    elvin
    Moderator

    Hi there,

    Can you try adding this CSS within the @media (max-width:768px){...} you’ve added?

    .two-column-mobile {
        width: 100%;
        display: flex;
    }

    Note: You may come across issues with them being uneven in height. You may have to add min-height like this:

    header.wp-show-posts-entry-header {
        min-height: 90px;
    }

    Or trim your titles so they have the same string length which in turn, have same height.

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