How to remove white spaces between sections on mobile view

[Lorenmn]

Hi,

This is the site I’m working on -
http://aeonsystems.co.uk/wp/home/
and its fine on desktop but on mobile view, there are white gaps between the sections and elements. How do I remove these?

Thanks,
Loren

[Prasant]

Hello @Lorenmn,

Thanks for asking.

I see that the spacing is coming because of headline element. To remove the spacing on mobile, I suggest you to add a class name under Customize > Class. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .headline-mobile {
    margin-top: 0 !important;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[Lorenmn]

Ah. Thanks. Now that I know what is causing the gap, I’ve actually fixed it slightly differently by simply adding this css to the headline element

margin-top:0px;padding-top:30px;

It now views fine on all devices.

Thanks for your help.

[jade]

Glad to hear it’s sorted and you’re most welcome in behalf of @Prasant.