Big gaps (margin or padding) when I view my site on mobile devices

[bionic_beats]

#491125

Hi, on my site http://www.medklang.de there are some unwanted gaps which are only visible on mobile devices. For example, above the headline “Baby Sleep 2” or above the headline “Adult Sleep 2”.

I can’t figure out where this big gap comes from. On desktops, there is no such gap, and everything looks like it supposed to be.

Any help is highly appreciated.

Thank you very much.

[migstf]

#491536

The fusion sharing box below the left images has a margin-bottom of 55px.

This isn’t such a big deal (although it is still too much in my opinion) on desktop, but is a very big deal on the small mobile screen sizes.

[bionic_beats]

#491584

Hi migstf, thanks a lot for your help. I’ve checked the sharing boxes but can’t find any option in the corresponding menu to adjust margins. Do you have an idea where this margin-body is coming from?

[migstf]

#491606

It’ll need to be done with custom css. You can add it in the Avada options or in any custom css plugin you might have. Try adding this –

.fusion-sharing-box {
margin-bottom: 20px!important;
padding-bottom: 0px!important;
}

That should leave enough separation on both desktop and mobile, without a big gap on small screens

[Author]

Posts