Narrow screens don't like the top banner

The very fancy top banner looks like it is a fixed width so with a narrow screens you end up with a horizontal scroll bar:

It’s a minor annoyance rather than a big issue.

1 Like

If you set width: 100% and unset height it will scale down and up (to its normal maximum) quite nicely:

2 Likes

it’s exactly the same size as the previous Anniversary one that was here for months without any problems !!

1 Like

Could be, I just didn’t notice it before. :slight_smile:

I’m rechecking it, maybe something is wrong !

EDIT : which is your screen size? 1024x768px ?
Could you try now ?

1 Like

What banner?

Not that I would ever suggest anyone would want to use, for example, uBlock Origin to block the banner, but if one was so inclined, one could.

Theoretically.

4 Likes

Same thing with Chromium and Firefox 82a. :frowning_face:

What are you using to test and I can see if I can replicate?

The width is defined 100% and there is no height…
i tested on Firefox 80.01 / Safari / Chromium Version 85.0.4183.83

1 Like

@FLVAL

Here in resolution 1360 x 768 it works without problems.

1 Like

I can see that the height setting has gone, but I don’t see the width being active (with plenty of page reloads to try and clear cache etc.).

If I remember correctly, depending on where the setting is changed it might need a container rebuild to take effect (so the SASS etc. is recompiled)… :confused:

Mobile is working also…

Yep with Discourse it’s not as you want, it’s a container.

1 Like

I can see width: 100% on the parent div,

I don’t know if that was there before… :confused:

To confirm, it happens for me whenever the window width is below 1091px, the image is wider than the containing div:


I have 1360 X 768 also and it works at full screen width.
To see what is being referred to, in the upper right where the minimize, resize/fullsize, and exit buttons are. Click on resize/fullsize and make the window narrower. At some point the banner will be truncated.

Pudge

3 Likes

Yep about Display is hard to satisfy everybody.
The banner is 1100x60px then I’m trying to make it work for maximum of displays resolutions.

Desktop Screen Resolution Stats Worldwide - Juil 2019/Juil 2020
1366x768 = 23.27%
1920x1080 = 20.53%
1536x864 = 8.47%
1440x900 = 6.55%
1280x720 = 4.73%
1600x900 = 4.19%

I would need some test on mobile !! i did one special for @Pudge :wink:

2 Likes

Yes, the banner is perfectly fine and looks lovely as it is. :wink:

It just needs a tweak to something in the Discourse theme to set the CSS width property so it will scale down when the window narrows to less than 1100px.

4 Likes

The mobile version, for me at least, has a portion of the banner lengthwise duplicated, added to said banner and all of that is centered.

The phone screen is 1080x1920 and I’m viewing the forum through Firefox.

1 Like

Thanks for testing mobile ! :wink:

Yes, on the right, the behavior on Discourse is not the same as doing a white page in the sense the existing code override your code… here it’s done as center width 100%, then I added the same image as background to resolve this wrong behavior…

We want to limit the use of plugin for this, they are sources of problems during update on Discourse…

2 Likes