In Mobile CSS, why isn't #main position: relative?


(Mendel) #1

In Desktop CSS it is, hover in Mobile CSS, it was removed in this commit.

Because the #main section is now absolutely positioned relative to the browser chrome, additional content provided in a mobile_header SiteCustomization get hidden.


(Jeff Atwood) #2

Good question! Let’s ask @awesomerobot


(TheLoneCuber) #3

The mobile header seems pretty broken when a text Title is used (instead of a logo). Is it just the #mail position:relative that’s the cause?

You can see on the Twitter Dev forum when the title length is longer than [about] 11 characters that visitors can’t even see —let-alone access— the primary navigation point.

And if you’re using a global_notice on your site, it appears above the navigation, so it’s entirely hidden from view. Given the importance of navigation and the urgent, emergency global banner, this is a problem.


(Jeff Atwood) #5

I fixed the text header a while ago

Though on giant phones we could scale it a bit


(Dennis Frank) #6

I am customizing my (client’s) first Discourse site and stumbled over the same issue.

Custom mobile header content is behind #main so .d-header covers it.

position: relative; on #main seems to fix it.

Any ideas @codinghorror @awesomerobot?


(Scott Trager) #7

Isn’t the point of a giant phone to fit more on screen rather than have everything made bigger?


(Kris) #8

Adding position: relative; works for me!

https://github.com/discourse/discourse/pull/3317


(Jeff Atwood) #9