Reducing white space in mobile version

Hello,

Could you please try this CSS code?

@media only screen and (max-device-width: 480px) {
#header {
margin-bottom: 0;
height: 10px;
}
}

You can add this in a Child Theme style.css file or you can use a custom CSS plugin.

Please let me know if it works.

Thanks,
Alex

Hi Alex,

Thanks for your reply. I tried to do as you suggested using Stylebot but it did not work.

Louise

Hello,

I apologize my last code did not work, could you please try this CSS code?

@media only screen and (max-width: 480px;) {
body #container #main-content {
margin-top: 250px;
}
}

Please let me know how it goes.

Thanks,
Alex

Hope you don’t mind me chiming in here quick. Just noticed a small typo in Alex’s code above. Doesn’t look like you’ve tried this yet as I can still see the issue on your site so hoping to catch ya before you try it. Remove the semi-colon in the media query, so will look like this:

@media only screen and (max-width: 480px) {
body #container #main-content {
margin-top: 250px;
}
}

Hi,

Neither Alex’s or Tyler’s code seem to have worked.

Thanks,
Louise

Hello @louisesouter,

I am sorry that the code is still not working. ?? Could you please clarify a few things for me?
A: How are you adding the code? In a Child Theme or plugin?
B: Are you using any caching plugins on your site such as WP Super Cache, W3 Total Cache, or WP Rocket? Any CDNs or server side cache?

Thanks,
Alex

Hi Alex,

In answer to your questions:

A: I am adding the code using Stylebot

B: I don’t know what a caching plugin is. The plugins I use are
Easy Contact Forms,
Easy Twitter Feed Widget,
Google XML Sitemaps,
Greg’s High Performance SEO,
WP Captcha Free,
WPML All Import
WPML Multilingual CMS

Thanks,
Louise

Hello,

Could you please try this code? Please note, the !important rule should only be used if absolutely necessary.

@media only screen and (max-width: 480px) {
body #container #main-content {
margin-top: 250px !important;
}
}

Here is some more information on the !important rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Thanks,
Alex

Hi Alex,

It is still not working.

Thanks,
Louise

Hey Louise,

I’ve double checked that code and the code should work on your site, however when inspecting your site on smaller resolutions I don’t see that the code has been added to your site so the issue is most likely there.

Can you please let me know where exactly are you adding the code and do you have some other code added there? I see that you’ve mentioning stylebot could you please try using the following plugin: https://www.ads-software.com/plugins/simple-custom-css/

Once installed and activated please try adding the code to Appearance -> Custom CSS.

Let me know how that goes ??

Cheers,
Bojan

Finally!

Thank you very much.

Louise

Glad I could help and have a great weekend ??

Cheers,
Bojan

Hello! I am having the same issue as Louise: a large and unneeded white space after h1 on mobile site. I’ve tried the codes listed above and they do not work. Can anyone help?

Website: https://www.megansweetly.com

Thanks in advance for your help!

Megan

• This reply was modified 8 years, 4 months ago by ferriemm.

Hey there @ferriemm,

I’ve checked your site using inspector toggle device and I can’t see any white spaces on your site, please see screenshot https://screencast.com/t/iw6s8zvFfJC.

I’ve also checked other pages but didn’t see anything there either, can you please advise on where exactly I can see this?

Cheers,
Bojan

Hi Bojan,

I finally got the problem sorted by trial and error.

Thanks,
Louise