Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 16, 2019 14:20:30 GMT -8
forum URL: wardensvigil.netI'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
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 18, 2019 11:04:17 GMT -8
bump
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 19, 2019 13:47:29 GMT -8
bump
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 21, 2019 8:16:41 GMT -8
bump
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 22, 2019 9:47:47 GMT -8
bump
|
|
#e61919
Support Staff
224482
0
1
May 17, 2024 16:18:36 GMT -8
Scott
23,384
August 2015
socalso
|
Post by Scott on Feb 23, 2019 9:25:54 GMT -8
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
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 23, 2019 12:00:43 GMT -8
i appreciate that! i’ll just keep bumping. ☺️
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 25, 2019 9:27:18 GMT -8
bump!
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 26, 2019 15:43:29 GMT -8
Bump QQ
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 12:36:06 GMT -8
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
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 27, 2019 12:39:10 GMT -8
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).
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 13:52:33 GMT -8
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
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 27, 2019 14:07:44 GMT -8
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
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Feb 27, 2019 14:12:01 GMT -8
Philip the default theme has been updated to the most recent version.
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 14:33:56 GMT -8
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 **/ }
|
|