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 15:08:53 GMT -8
Yes I understand the idea of this, which is why I changed everything to REM going off of the primary font size of 16px. Is there still somewhere that is saying 11? I don't want 11.
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 15:33:23 GMT -8
Oh no sorry, I just assumed that's what you were going for based on the html{ font-size: 70%; /** 11px **/ } you had initially. I wrote a less function a while back that works for proboards if you get confused with rem values, simply enter the pixel value you want and it will convert it for you, if it helps(just place the code in your stylesheet).
/** * convert px to rem or em * @unit(rem|em) **/
.PXtoUnit(@pixels, @unit: em, @base:16px) when(ispixel(@pixels)){ @_unit: unit((@pixels / @base), @unit); }
/** * example * 1.) call the function inside a selector * 2.) use the return value @_unit **/
.selector{ .PXtoUnit(32px, rem); font-size: @_unit; }
|
|
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 15:38:33 GMT -8
I appreciate the effort in that -- I'm not totally sure if I need the function though; all my values are appropriately in REM at the moment, with some px use here and there. What is concerning me is that despite having the base 16px value set and consistent REM values between the "full reply" page (I'm encompassing thread as well as PM reply on this) and the rest of the forum, the "full reply" REM values appear incorrect -- key word here is appear incorrect, because the actual numbers used have not changed between any other mobile view page and this mobilve view page. So as a singular example, I have specific REM values for the mobile view of the banner area. This is displaying correctly on EVERY page except the "full reply" page, where all the values seem doubled by my estimation, even though there is literally zero difference in the CSS on that page since the banner appears globally. If it were a handful of elements doing this that only occurred on the "full reply" page and nowhere else, it would be easier to pinpoint, but from my estimation there is 0 reason for my CSS to be doubling on this specific page, for literally all elements. If you haven't already, I really encourage you to look at the mobile view of this page: wardensvigil.net/thread/new/55It's fine on the desktop view, it's fine in my medium-width view, but it goes to hell on mobile. Thread view: Full reply view: Attachments:
|
|
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 15:57:16 GMT -8
I feel like I may not be explaining this well, so let me try to be clearer and more concise:
- All elements on the "full reply" page are roughly doubled in size - The sizing issue occurs only on the "full reply" page (thread as well as conversation) - The elements being affected are both global and page-specific elements - Global elements do not have any page-specific CSS changes - ONLY viewports between 375 and 768px wide are affected by this issue
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 16:03:33 GMT -8
I'm not seeing what you are seeing, both pages(home,thread) are identical in size
|
|
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 16:19:07 GMT -8
... what the heck. is that via emulator or on an actual device? also what browser? I'm using my phone (chrome, iphone7) and am seeing it as intended.
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 16:32:32 GMT -8
That was weird! Must be a bug in firefox emulator, managed to replicate the problem in chrome canary.
Solution: your missing the proper meta(viewport) tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
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 16:43:02 GMT -8
Oh jesus lord that effed everything BUT after some cursory minor edits to test those edits also appear on the full reply page SO please consider this fixed with a very long laundry list of pixel pushing for me to do this weekend x)
Thanks so much, phil!
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Feb 27, 2019 16:48:32 GMT -8
no worries. I never noticed it because the body element length was coming up correct in firefox, was only when I pulled it into chrome I noticed one page was correct(375px) but the other was something like(900px) was pretty obvious after that.
Most of the site looks fine, just decrease the font-sizes and you will be on your way, good luck!
|
|
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 16:51:51 GMT -8
I'm so glad you noticed that, I've been wracking my brain for months on how to try and fix this since I couldn't see anything wrong with the CSS itself -- it didn't even occur to me to check the HTML.
I'm sure I can get the sizing fixed ASAP now -- everything's just a smidge too large, but since all the pages are already structured it's just a matter of deciding what increments to use.
Thanks again, so very much!
|
|
#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 28, 2019 11:12:50 GMT -8
Kami, I've been watching this and am glad you got the assistance was able to figure this out.
|
|
inherit
246669
0
Jan 2, 2023 13:25:26 GMT -8
Philip
97
July 2017
phil82
|
Post by Philip on Mar 1, 2019 6:33:32 GMT -8
just some quick advice that you may find handy before you start fixing up your theme.
Rather than change every single font-size individually you could simply create a variable and change that based on your media queries, then just use that to base the rest of your font sizes off.
So you could try something like this(btw this also works really well with padding/margins)
:root{ --font-size: 1rem; /** 16px **/ --padding__device: 1rem; }
.selector1,.selector2{ font-size: var(--font-size); } .selector3,.selector4{ padding: 0 var(--padding__device); }
Doing it like so means you will only have to change variable for each media query
/** Galaxy s9 **/ @media (min-width:360px){ :root{ --font-size: 0.875rem; } } /** iphone 6/7/8 **/ @media (min-width:375px){ :root{ --font-size: 0.938rem; } } /** iphone 6/7/8 PLUS **/ @media (min-width:414px){ :root{ --font-size: 1rem; --padding__device: 1rem; } } @media (min-width:667px){ :root{ --font-size: 1.125rem; --padding__device: 1.5rem; } } /** iPad **/ @media (min-width:736px){ :root{ --font-size: 1.250rem; --padding__device: 2rem; } } /** Desktop **/ @media (min-width:1024px){ :root{ --font-size: 1.5rem; --padding__device: 3rem; } }
|
|
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 Mar 1, 2019 10:23:04 GMT -8
i’ll give that a shot! thanks (:
|
|