CSS Wonky on just ONE mobile page

[Kami]

Hi everyone!

I have no idea how this happened, but my CSS has gone haywire on the full reply / wysiwyg editor page -- but, on small-width mobile only​ and only​ on this one page. If you navigate anywhere else, the CSS is correct.

I'm not sure what to do to fix it, so any help would be appreciated.

wardensvigil-theme.proboards.com

The posting pages are guest-friendly, so please feel free to test it out. Note that this has to be on mobile​ view for you to see what I'm talking about (not just shrunken-down browser view). On chrome, at least, you can click the device emulator in the upper left on the dev console, but I'm not sure about other browsers.​​​

[elli]

Class .controls has float: right !important. This classname is used on the WYSIWYG editor toolbar, as well as the controls in the floating control bar. Change this selector to what PB uses to fix it: .container > .control-bar

[Kami]

Thanks for the reply! I changed .controls to .container > .control-bar but the button has shifted back to the left and nothing seems to have changed on the reply / create post page -- did I miss something?

[Kami]

bumperoo

[elli]

Kami I looked at it using the device emulator, and the posting page seems ok now. So does the control bar. Do you have a screenshot? Also, which browser?

[Kami]

​hi elli! this is chrome for iphone 7 but it’s also happening on chrome in my ipad 10.5

[Kami]

bump

[elli]

This is very strange behavior. I looked up and down the page structure for at least an hour, and there is nothing particular about this page that should cause the font size to blow up like that. No change on the font size of the parent containers (which is what em is based on), the html and body CSS doesn't change (base font size), and there's seemingly nothing within the iframe or post form that is affecting font sizing (and shouldn't, for that matter).

What I can tell you is that it is related to your use of the em unit. Somehow, they are cascading differently on this page than on the others, and basically multiplying into the result you see here. It is for this reason that the em unit is generally avoided for text sizing. It's great for other properties like padding and letter-spacing — as well as media queries — but is not an exact substitute for px, and leads to this kind of issue all too often.

You will see in the TARP theme that I used rem for font sizing — that would be my recommendation. If you're wanting everything to scale, look into using em for media queries.

[Kami]

gotcha! I’ll sort that out, thank you!