Welcome Link Banner has extra margin

UX
,
1

There is a small margin bug:

image
image719×111 1.36 KB

I can not see this issue on meta, but on my instance, this is caused by this CSS code:

image

The code is there to add some margin between top buttons and the welcome banner, but it’s also enforcing the margin on places where it should not be, the margin also stays enabled even if the welcome banner is hidden, for example, because of staff or trust level.

EDIT: sloppy fix?
Remove the margin from this class:

.above-main-container-outlet.welcome-link-banner-connectors {
    margin-bottom: 0em !important;
}

And add the same margin on this class:

.above-main-container-outlet.welcome-link-banner-connectors .welcome-link-banner, .below-site-header-outlet.welcome-link-banner-connector .welcome-link-banner {
    margin-bottom: 1em;
}

This seems to have solved the issue for me. Haven’t seen things breaking so far and the banner still looks good.

3 Likes
2

.above-main-container-outlet.welcome-link-banner-connectors has a margin-bottom: 1em I don’t see the purpose for.

Besides, it adds an empty space whether the Welcome banner is displayed or not. If it’s not displayed, the margin shouldn’t be here.

image
image2498×1369 261 KB

It can also mess with the layout of other theme components below, like the light rope from Christmas Decoration Component 🎄.

Example:

Two solutions here:

Either remove the margin-bottom from the Welcome Banner component if it has no use or add a display: none; on the Welcome Banner when the requirements for it to be displayed are not met.

4 Likes
3

Thanks for letting me know! There are some cases where the banner is immediately above another banner or alert, which is why it needs the margin. I was able to relocate the margin to remove the impact when the component is hidden.

6 Likes
4

Well, it was a third then! :laughing:

4 Likes