Removing Branding Gap?

Hey there,

Please add following custom CSS in your child theme’s stylesheet:

#branding{
    margin:-1em;
}

Hope it helps ??

Ah, thanks. Now I understand. ??

Hi @themeislesupport and @cooljosh3k,

As a general rule, I try to avoid negative values for margin and padding in custom CSS. Negative values can cause layout issues across devices of different widths and also make future customisations more complex than needs be.

Instead, I would always recommend figuring out which elements the spacing for the gap is being added to, and targeting them directly.

In this case, the spacing was being added via extra margin from the #branding and #main elements.

Instead of adding the negative value to the margin for #branding, I recommend setting the margin for both #branding and #main to zero:

#branding, #main {
    margin-bottom: 0;
}

#main {
    margin-top: 0;
}

Let me know if that information is helpful or if you have further questions.

Hi @siobhyb,

Thank you for letting me know. Will keep that in mind ??

You’re welcome. ??

Thanks, I will apply this instead.

Great! ?? Feel free to start another thread if any extra questions come up, too.