I just created a website for myself and used the Shapely theme. It’s been awesome so far and great for a beginner like myself.
I made 4 parallax sections on my home page and it looks great on the desktop/laptop, but when i check the site on my iphone, the white space in between the 2nd up to the 4th parallax doesn’t seem to be there anymore.
I have found some CSS that may potentially fix the issue that you’re having, however, before doing that, I’m going to ask that you clear your browser cache and see if the issue persist.
The reason I ask this is because from my end, I’m seeing the spaces correctly on mobile, and the difference between your view and mine is usually because your browser has cached the page so that it’s more readily available to you since you’re browsing it more often.
If, however, it doesn’t work, I’m going to ask that you add and save the code below to Appearance > Customize > Additional CSS:
@media only screen and (max-width:500px) {
.widget {
margin-bottom: 7px;
}
Oh wow! That’s amazing! THANK YOU SO MUCH. It worked just fine for the 2nd to the 4th parallax, except the bottom padding of the first one seemed like it doubled in size. Is that still solvable to be adjusted to just 7px?
There’s some space between the first and second banners that I simply can’t account for. I’m assuming this space has been hard coded as a separator for header and body, but I’ve found a way to exclude the first slider from the CSS.
Just replace the code given previously with this:
@media only screen and (max-width:500px) {
.widget.shapely_home_parallax:nth-child(2), .widget.shapely_home_parallax:nth-child(3), .widget.shapely_home_parallax:nth-child(4) {
margin-bottom: 7px!Important;
}}
