Full Reply page doubling on sizing

[Kami]

forum URL: wardensvigil.net

I'm having a bizarre issue with the full reply page.

I've changed up a lot of coding here so that the forum is more mobile responsive. It's not great and the CSS is super sloppy but it's functional with very few issues -- that is, until you get to the full reply page on mobile.

It's hard to explain, so I'll just use an example.

Element A is set to a size of 2rem on mobile. This works on all pages as a reasonable size except on the full reply page. There, Element A's 2rem looks like 4rem (or greater), even though nothing on the page has overridden the CSS styling, which still says 2rem.

I have no idea why it's doing this, since I made sure to keep any modifications of this page as minimal as possible due to the WYSIWYG editor.

Thanks in advance!

[Kami]

bump

[Kami]

bump

[Kami]

bump

[Kami]

bump

[Scott]

Kami, fyi I did some reading on rem and understand the concept, but not enough to be able to assist, sorry. I was hoping by moving the thread here, someone more experienced would pick this up and be able to help you out.

[Kami]

i appreciate that! i’ll just keep bumping. ☺️

[Kami]

bump!

[Kami]

Bump QQ

[Philip]

What element?

If the element is inside the textarea(root) those are set to 2em by default, so whatever 2em is(based on parent font-size) any children inside that, that are set to 2rem will be 2em*2

@media only handheld {
textarea { font-size: 2em; }
}
If that is not what's causing the issue, can you show screenshot ? as I don't have access to your forum.

ps: have you changed the body font-size on mobile ? That's the only thing I can think of that would affect REM if no other root node font-size is set, however like you say, no other elements are affected, curious. 

[Kami]

Hi Phil! It's not a specific element, it's the ENTIRE page -- literally every​  single element on the page, from content in the banner to content in the footer and everywhere in between is increased by (my rough estimate of) x2.​​​

Here is a guest-friendly board; linking directly to the create new thread page so you can see it:
wardensvigil.net/thread/new/55

(this is viewable even in the in-browser inspect tool / emulator so you don't need to load it on an actual mobile device to see the effects).

[Philip]

Doing a side by side comparison of the homepage and create thread page and they both look the same(hugh).  Go into the network tab and make sure disable cache is selected.

Still trying to figure out the issue but some things I have noticed.  The html tag is set to 70%(16px) font-size which is about 11px, the body is then set to 1.2rem which is ( 11px*1.2rem=13px )

So you have some element(s) menu_greeting,#logo  set to ( 13px * 3em = 39px ) ....still going through each element

Might I suggest If you want your default font size to be 11px, firstly set the html,body{ font-size: 16px; } because it's much easier to calculate EM/REM that way as it's easier to calculate in multiples of 8.

So 16px default :

.5rem/em = 8px

1rem/em = 16px

1.5rem/em = 24px

then set the #wrapper{ font-size: 0.688em; /* 11px */ }

That way all children(direct descendants) of #wrapper will base em off of it's font-size and not the body, ie: 1em will = 11px

You can use this calculator here to figure it out.  In the first column select 11px(highlighted in blue) and in the right column it will tell you what em values to use.  So say you want infoboxes to be 18px, then use the value 1.636em as shown

#wrapper

  |

  |-->header

  |-->infoboxes{ font-size: 1.636em; }

  |-->content

  |-->custom footer

[Kami]

ah yeah, my bad, I forgot the edits to the theme weren't live yet (sorry). Let me make that live now.

The HTML tag is currently set to 16px default :/ Please note that the rem/em values have been updated to be 100% rem, no switching between the two units. The problem persists.

[Kami]

Philip the default theme has been updated to the most recent version.

[Philip]

updated my previous reply.

Only use rem if you want to calculate the values from the root(body) which is 16px.  The reason you want it 16px is to calculate padding/margin more easily with rem(s)

So, if you set the #wrapper{ font-size: 0.688em; /* 11px */ } this will be the new root(highest dom node) to calculate font-sizes from when using em, otherwise setting the values to rem would result in the font sizes being calculated from the body(16px)

   Using EM as values

html,body{
 font-size: 16px;
}
#wrapper{
 font-size: 0.688em; /** 11px **/
}
.menu_greeting{
  font-size: 1.636em; /** 11px * 1.636em = 18px **/
}


   Using REM as values

html,body{
 font-size: 16px;
}
#wrapper{
 font-size: 1rem; /** 16px **/
}
.menu_greeting{
  font-size: 1.125rem; /** 18px **/
}