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

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.

No problem 🙂

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/

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.