Home › Forums › Pro Support › Show 2 rows on mobile for all WPSP list & Show ONLY 1 row for a certain WPSP
Tagged: mobile display two rows
- This topic has 7 replies, 2 voices, and was last updated 1 year, 11 months ago by
Tom.
-
AuthorPosts
-
January 2, 2022 at 1:34 am #36273
Tom
ParticipantHi
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
January 2, 2022 at 6:03 pm #36279Tom
ParticipantI 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;
}January 3, 2022 at 5:45 pm #36288elvin
ModeratorHi 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.
January 3, 2022 at 7:18 pm #36290Tom
ParticipantHi,
Were you trying to reduce the number of columns so the posts only display on 1 row?
—Yes
Sorry for my poor English!
January 3, 2022 at 7:37 pm #36292elvin
ModeratorDoing 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. 😀
January 3, 2022 at 9:40 pm #36294Tom
ParticipantThank you Elvin! I understand it now. I will make more effort to optimize the display.
January 3, 2022 at 10:01 pm #36296elvin
ModeratorNo problem. Let us know if you need further help. 😀
January 3, 2022 at 10:13 pm #36298Tom
ParticipantThanks for your help. No more questions for now. My problem was solved
-
AuthorPosts
- You must be logged in to reply to this topic.