Docs

[MB]

Hi,

We’ve tested the responsive h1 on home page and on mobile viewports there is a gap under the h1 that makes it misaligned vertically.

Ideas?

Thanks, MB

Vancouver Island Hiking Guide

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-section {
    padding: 0 !important;
    margin: 0 !important;
}

Let us know how this goes!

[MB]

Thanks for the reply. We don’t want to remove margins and padding from all sections globally. Just on the home page https://mbguiding.ca/ under the h1 heading “Vancouver Island Hiking Guide” when in a smaller viewport on a mobile device. That is the only time when the extra gap under the heading in question appears. Please test and reproduce the issue by viewing the home page https://mbguiding.ca/ on a desktop and on a smaller viewport mobile device. Thanks

[Friech]

Hi There,

You mean this gap?

That is the first section’s bottom padding. We can adjust that when the page is viewed on mobile with the custom CSS below.

@media (max-width: 767px) {
	.home #x-section-1 {
		padding-bottom: 5% !important;
	}
}

Hope it helps, Cheers!

[MB]

[RESOLVED] Thanks Themeco! 😀

[Christopher]

You’re welcome.

[Author]

Posts