No spaces between parallax sections on iphone mobile view

Hi there!

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.

My website url is: and here are a couple of screenshots to what it looks like on my phone:

Can any of you help me with this concern?

Hey there,
Hope you’re doing well today

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;

I hope this solves the issue. :slight_smile:

Best Regards,

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?

Thanks a lot, support! You guys are amazing!

Hey there,
Hope you’re doing well today

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;

Please let me know if this works.

Best Regards,

It worked perfectly fine!! Thank you so much, big help!!



Glad we helped. :slight_smile:

Let us know if you have any other questions in a separate thread.