Header on this site

So for awhile now I have been seeing this site like this:

In a css file on this site under the heading .alert .alert-info I think it is, there is a -31px. If that was removed the header would show up fine. With that line in it shows like the above pic. It’s been bugging me so I thought I would mention it. When fixed (margin-bottom) it would look as it should:

3 Likes

Or just change:
margin-bottom: -31px,

to this:
margin-bottom: 31px,

2 Likes

That fixes it for large screens, but not for small ones. I’m not familiar with Ember so I can’t narrow down which class is responsible for it. Looks like the element is inline instead of block. I’m no expert, but it seems like it should be a block element to render and respond properly.

1 Like

Yes, I keep forgetting about my monitor, thank you, lol. I’ll take another look when I get home but you are right. I’m just using inspect from the right drop down menu in FF to play around. I don’t have Ember. Just starting to get back into css and php after awhile of inactivity so I am probably a bit rusty.

2 Likes

I’m in exactly the same boat lol

2 Likes

I’ve been seeing that for a long time now, but I always thought that was something weird with my own setup on my computer :smiley:

Anyway, now that I see there are other people with that problem, I’m gonna go ahead and shamelessly page @AndyB. No rest for the wicked :adnyplz: :wink:

2 Likes

Hm weird, never seen that on either size browser window. Will tinker.

Made a couple tiny adjustments,

Small browser:

Fullscreen (1920x1080)

This is what I get on the screen on Chrome, although it also looks like something changed with the breadcrumb styling that appears to be in Discourse’s end; must have been an update pushed in the past few weeks while I was out.

Okay, thanks! I think there’s something with that specific alert which I don’t get on this account as an admin and thus didn’t account for? I’ll look into it.

2 Likes

Can confirm it’s there, on Firefox 95.0.2 on Windows 10.

1 Like

Would this help:

In your css under “category-heading”
Add this:

margin-top: 31px;

Looks good here anyway. Can anyone else test this that has a smaller-ish monitor.

Ok I think I fixed it? edit: nm, still need to do something

1 Like

It looks correct to me now and it is responsive to screen size.

Looks better here.

Looks like it worked. I still see it in my normal session, despite pressing Ctrl+Shift+R, but it looks normal on Firefox on Windows 10 on a different computer. I guess something is stuck in my local cache.

It never didn’t seem fine on OperaGX ~=shrug=~

Small window:

Large Window:

The + New Topic button goes a little weird in small, but other than that… And not really sure it should even be there as just above it is written not to use it without selecting a category first. :stuck_out_tongue:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.