Hi
I have a layout which I wont the user to be able to scale depending on there screen size (so things are not tiny in 4k for example). So I have set my footer, sidebar and header etc, heights to the rem unit.
But when I set the font size on the body tag it has no affect on the heights. It affects all the text but the layout stays the same in various browsers.
Setting the units to the em instead of rem fixed this but I was curious why rem didn’t work.
Any ideas?
Thanks in advance 
REM is relative to the Root element, that being the <html> tag, not the <body> tag.
1 Like
as @SamA74 mentioned, the rem unit is relative to the root element. If you want your font size to be relative to the font size of the containing element, you should use the em unit.
There is a great article explaining the relative font sizes with examples here. Hope this helps!
I may have misunderstood the methodology and I’m not quite sure what you mean to do but that doesn’t sound right to me? Responsive sites aren’t built that way. Unless it’s a special one-off widget or something similar I can’t see a use case for this. You shouldn’t be setting heights on elements that hold fluid content like text anyway.
I assume you have the mobile viewport meta tag in place and are not trying to correct a shrunken normal site when viewed on a mobile?
Sorry, if I’ve misunderstood what you wanted to do but I don’t want you careering off down the wrong path
1 Like
Hi
Thanks for your reply.
The idea is to have a responsive site, but also a scalable one with a single scaling factor.
Most responsive sites adjust to there their screen sizes up to a certain point with media breakpoints. The problem is when you get to high dpi resolutions such as 4k. The site ends up been tiny and has a huge amount of whitespace on either side. I usually fix this by zooming in but then if I move the browser windows to a screen with a smaller dpi then things can be so big it goes in to mobile view. So ideally the site should automatically scale once above about the 1440p mark. I am also having an option to turn it off anyway in case the user likes things to be small .
It works very similar to windows scaling.
As it happens I’m not setting the height on the navbar but there are cases where you want to. The sidebar is restricted to about 200px whatever that is in rem. And yes I am using the viewport meta tag .
Here for example is what google looks like in 4k:
When scaled to a 150% which is about the same as a ~100dpi screen:
Show us a “working page” with your HTML and CSS.
A “working page” starts with <!doctype>, includes the <head> section which also may include the CSS (for convenience, it is usually easiest to include relevent CSS at the top of a “working page”), then the <body> section, and finally </html>. Such as:
<!doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>responsive page</title>
<style>
/* your CSS here */ /* see notes below */
.outer {
max-width:1440px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer"> <!-- see notes below -->
<header>
<!-- your HTML here -->
</header>
<main>
<!-- your HTML here -->
</main>
<footer>
<!-- your HTML here -->
</footer>
</div>
</body>
</html>
We should be able to copy the “working page” to our computers and see exactly what you see. With the code, we can better understand your design intent and level of knowledge.
You may wish to include screen shots as you have done in post #6.
Any information that you provide to help us understand your issue is appreciated.
Thank you
for more info: Forum Posting Basics
Remarks:
The desktop view of most sites (not all) is designed to fit within a maximum width. I usually use a <div class="outer"> for the outermost page/site container. To center the web page in browser windows that are wider than the page’s designed max width, one assigns {max-width:1440px; margin:0 auto;} to that container. (see example above). Without making any more changes, that outer box will be “responsive” or “fluid” from 1440px down to zero. Media queries come into play when one needs to change the layout of the content.
As far as resizing the font, that is a different issue. I suspect that you are thinking about allowing your users to resize your site’s font in their browsers using JavaScript (an old MS technique) but such an adjustment is inappropriate nowadays since browsers allow considerable adjustments to compensate for screen rez.
What’s with the 1440p? That is a video designation - p = primary, i = interlaced - not a basic HTML/CSS term. Did you mean px? (I assumed px in my example.)
If you have not taken a formal class in HTML and CSS, I strongly encourage you to do so. It is difficult to learn HTML and CSS coding piecemeal.
The HTML you have is pretty similar to mine.
Basically what I’m working on is a collection of popular admin themes thats not based on any libraries.
The idea is the HTML stays the same and the css changes. By 1440p I meant the display but yes that would be 2560x1440
You can see the HTML here https://github.com/abdullahseba/theme-pack/blob/develop/index.html
Them I have 3 scaling factors set 100% by defualt https://github.com/abdullahseba/theme-pack/blob/develop/src/scss/abstract/variables.scss#L91
Please excuse the code 
its still a mess while I try to figure stuff out.
If you are catering for large screen displays then this CSS tricks article has a lot of helpful information.
I would be inclined to simply use media queries for the larger screen sizes and responsive typography and adjust as required. I’ve never been a fan of zooming as such. If your font and container sizes are based on rem units then you could increase the root element to get larger versions for larger screens via a simple change in the relevant media query.
2 Likes
Yep that’s exactly what I’m doing. So any sizes are in rem unless px is really needed. I think so far everything is in rem except for the actual breakpoints. Thanks for the link .
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.