-
Posts
-
Hi, I’ve read a few threads about spacing being off between blog post excerpts for mobile view when using the blog grid layout. I have implemented a few different variations of suggested coding, but haven’t been able to get it to work. You can still see in mobile view how there isn’t much space between post excerpts. I’ve provided access to this website and you can see the latest code I used at the very bottom of the Quick CSS:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
margin: 0;
clear: both;
margin-bottom: 50px;
}.avia-content-slider .slide-entry-wrap {
margin-bottom: 0;
}
}Thank you so much for your help!
Hey imagestudios,
Thank you for the inquiry.
You can try this css code to increase the margin between each article or post entry on mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .responsive #top #wrap_all .flex_column.slide-entry { margin-bottom: 64px; } }Best regards,
IsmaelThanks Ismael. I did add that css and it didn’t affect the spacing at all that I was looking for after the “Read more.” I did try in incognito mode as well. Thoughts?
Hi,
Thank you for the update.
We’ve checked the modifications in the Quick CSS field and noticed that one of your css media queries is missing a closing tag or curly brace, which renders the rest of the css rules invalid.
/* MASONRY GALLERY FONT SIZE AND COLOR */ @media only screen and (min-width: 768px) {We didn’t try to adjust it because we are not sure which modifications are meant for desktop and which are intended for other screen sizes. Also, please make sure to remove duplicate css media queries such as
@media only screen and (max-width: 767px) {You only require one instance of this per stylesheet.
Best regards,
IsmaelOK, thank you so much. I fixed the closing bracket. I’m unclear on the @media only screen and (max-width: 767px) { part though. Wouldn’t that pertain only to the css I’m adding underneath it and then closing out with a closing bracket? Having it present anywhere in the css code shouldn’t apply it to everything would it?
Also, I noticed your code for the Blog Grid layout on mobile view adds margin to the bottom of post 1 and 3, but not the middle post.
I did figure out the closing bracket issue and my questions after that. The only question that remains is this:
Also, I noticed your code for the Blog Grid layout on mobile view adds margin to the bottom of post 1 and 3, but not the middle post.
Hi,
Glad to hear that you’ve resolved the css issue. To make sure that all entries have a bottom margin on mobile view, please replace the previous css code with the following:
.responsive #top #wrap_all .flex_column.slide-entry, .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even { margin-bottom: 40px; }Be sure to insert this css rule within the existing css media query (max-width: 767px).
Best regards,
Ismael
- You must be logged in to reply to this topic.