We're merging with GenerateBlocks! Learn more here.

[Resolved] Show 2 rows on mobile for all WPSP list & Show ONLY 1 row for a certain WPSP

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Show 2 rows on mobile for all WPSP list & Show ONLY 1 row for a certain WPSP

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #36273
    Tom
    Participant

    Hi

    I want to use Show 2 rows on mobile for all WPSP list & Show ONLY 1 row on mobile for a certain WPSP list(Masonry mode plus Overlay- Style 1) at the same time.

    I am using below two sets of css codes. But it doesn’t work for the WPSP(Masonry mode plus Overlay- Style 1) which I want to show ONLY 1 row on mobile.

    /* Mobile two rows display */
    @media (max-width: 768px) {
    .wp-show-posts .wp-show-posts-single,.wp-show-posts-single.post{
    width:48%;margin-right:2%;
    float:left;
    }

    .wp-show-posts-entry-summary{
    display:none;
    }

    }

    /* Mobile single row display for homepage product categories */
    @media (max-width: 1024px) {
    #wpsp-6417 .wp-show-posts-columns, .wp-show-posts-inner {
    margin-left: 0 !important;
    margin-right:0 !important
    }

    #wpsp-6417 .wp-show-posts-columns .wp-show-posts-single {
    display: block;
    width:100%
    }

    #wpsp-6417 .wp-show-posts-image.wpsp-image-left, .wp-show-posts-image.wpsp-image-right {
    float: none;
    margin-right: 0;
    margin-left:0;
    }
    #wpsp-6417 .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: 100%;
    max-width: unset;
    object-fit: unset;
    }
    }

    Can I get help? Many thanks!

    Tom

    #36279
    Tom
    Participant

    I also tried to use apply css(show two rows on mobile) to only one WPSP list and delete css applied for other WPSP list. The result is all WPSP list show single row on mobile.

    I think my css code applied to certain WPSP is wrong as below:

    /* Mobile two rows display */
    @media (max-width: 768px) {
    #wpsp-5692 .wp-show-posts .wp-show-posts-single,.wp-show-posts-single.post{
    width:48%;margin-right:2%;
    float:left;
    }

    #wpsp-5692 .wp-show-posts-entry-summary{
    display:none;
    }

    #36288
    elvin
    Moderator

    Hi there,

    I’m not sure I fully picture what you mean by “1 row on mobile”.

    Were you trying to reduce the number of columns so the posts only display on 1 row?

    Can you provide a mockup image of what you mean? So I can use it as reference in modifying your CSS to achieve the desired layout.

    #36290
    Tom
    Participant

    Hi,

    Were you trying to reduce the number of columns so the posts only display on 1 row?

    —Yes

    Sorry for my poor English!

    #36292
    elvin
    Moderator

    Doing this requires a bit of math for the width of the post items.

    And the variable will depend on how many posts were displayed in the first place.

    Example Scenario:

    If your WPSP list displays 5 posts and you want them to display in 1 row on mobile, you’ll have to set the width of each posts to 100% divided by the number of posts displayed.

    Example for 5 posts in 1 row.

    /* Mobile two rows display */
    @media (max-width: 768px) {
    #wpsp-5692 .wp-show-posts .wp-show-posts-single,.wp-show-posts-single.post{
    width: calc( 100% / 5 );
    padding-right: 20px;
    }
    }

    calc( 100% / 5 ) can be interchanged w/ 20% as 100% / 5 = 20% but be careful with this one as the posts may difficult to read if the width of the post item is too narrow.

    So if you have 10 posts, you’ll have to do 100% / 10 it’ll be basically 10% width for each post item. (I advise against this because of legibility. I think 20% is already too narrow.)

    With this in consideration, I don’t think it’s advisable to do 1 row on mobile if the page is displaying 3 or more posts because the horizontal space will be too narrow. 😀

    #36294
    Tom
    Participant

    Thank you Elvin! I understand it now. I will make more effort to optimize the display.

    #36296
    elvin
    Moderator

    No problem. Let us know if you need further help. 😀

    #36298
    Tom
    Participant

    Thanks for your help. No more questions for now. My problem was solved

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