Fixed 'New' badge causes horizontal overflow

CyberAP

Well-known member
If you reduce the width of the page with new messages you will get a scrollbar at the bottom of your screen.
This is caused by the 'New' badge on the right side.

scr.webp


To solve this issue we just need to add padding: 0 10px; to .wrapperXfSite. The result is:

scr2.webp

Of course this padding should be disabled for mobile layout.
 
That's pretty simple to work around too...
Code:
.message .newIndicator {
left: -8px;
}
.message .newIndicator span {
display: none;
}

move the thing over and drop the contained span when display is an issue
 
Fixed with a little bit of padding - the issue comes up in all cases (non-responsive) if you removed the margin on the page width. Obviously it'll still happen if you remove the padding too, so then you'd need to move the new indicator on your own too.
 
Fixed with a little bit of padding - the issue comes up in all cases (non-responsive) if you removed the margin on the page width. Obviously it'll still happen if you remove the padding too, so then you'd need to move the new indicator on your own too.

Padding for .pageWidth or something else?
 
Top Bottom