- This topic has 7 replies, 2 voices, and was last updated 1 year, 11 months ago by
.
-
Posts
-
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
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;
}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.
Hi,
Were you trying to reduce the number of columns so the posts only display on 1 row?
—Yes
Sorry for my poor English!
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. 😀
- You must be logged in to reply to this topic.