Archived topic
Large Vertical Spaces Between Sections in Safari, Firefox, Opera & on iPhone
7 replies · Started by Mary Pearson on July 26, 2021
I usually use Chrome for my browser but am having issues with my website at https://coviddisinfectant.ca so had cause to check it on other browsers. It looks perfect on Chrome but on Safari, Firefox, Opera and on my iPhone there are very large vertical spaces between sections.
How do I get it to look like it does on Chrome and in Customizer, for all the other browsers and iPhone?
Thank you.
Hi there,
You have this CSS on your site:
.site-main>* {
margin-top: calc(3 * var(--global--spacing-vertical));
margin-bottom: calc(3 * var(--global--spacing-vertical));
}This adds top and bottom margin between sections. See the differences when I turn it off here - https://share.getcloudapp.com/rRuj4kYZ
Any particular purpose for this CSS?
Or perhaps I'm looking at the wrong spacing? Let us know.
Elvin you are amazing! I have never seen this code before and it is not in my Custom CSS. I saw your screenshot but I'm sorry, I didn't understand it. Where would I find this code to remove it?
Hi there,
can you disable the WP Rocket plugin temporarily so i can see where the CSS is being generated?
WP Rocket plugin has been deactivated. Thank you David.
Well i am not seeing the CSS in the site now, it may have been some legacy code in the WP Rocket Cache.
Can you check the site without WP Rocket and see if its ok?
If it is re-enable WP Rocket, clear the browser caches and see if it comes back.
David, that is exactly the problem. When I re-activate, the page reverts to having the big spaces between. I will contact WP-Rocket.
Again, many thanks to both you and Elvin!!!!!
You're welcome
