Two problem with font root size

Design help Layout & Design
1

Hi there,

I changed the font root size with this html embed (to be visible directly in the designer):

<style>
html { font-size: 20px; }
@media (min-width: 1920px) {
html { font-size: 23px; }
}
@media (min-width: 1440px) {
html { font-size: 22px; }
}
@media (min-width: 1280px) {
html { font-size: 21px; }
}
@media (max-width: 991px) {
html { font-size: 19px; }
}
@media (max-width: 767px) {
html { font-size: 18px; }
}
@media (max-width: 478px) {
html { font-size: 17px; }
}
</style>

So far, so good. But there are two problems:

  1. The breakpoints 1440px and up and 1920 px and up ignore the code and stay at 21 px. You can check that on the starting page in the lower area. There are two divs. Left one with the px height and the right one with rem height. All other breakpoints works fine.
  2. Every time the page is loaded, in the upper left the html emebd code is visible for some mili seconds.

It would be awesome if someone could help me. This is my basic template for all my website projects. So it is very important for me. :sweat_smile: Many thanks in advance!

Here is my site Read-Only: Webflow - MH GRAFIKDESIGN Template

2

Hi Marc,

CSS stands for “cascading style sheets”.

The important bit here is "cascading " as in flowing downwards.

CSS is implemented in the order that you write it WITH LATER CSS OVERRIDING EARLIER CSS

So the reason your 1920px and 1440px media queries are not working is because they are being over riden by the later 1280px one. You can fix this by changing the order of your CSS like so:

html { font-size: 20px; } @media (min-width: 1280px) { html { font-size: 21px; } } @media (min-width: 1440px) { html { font-size: 22px; } } @media (min-width: 1920px) { html { font-size: 23px; } } @media (max-width: 991px) { html { font-size: 19px; } } @media (max-width: 767px) { html { font-size: 18px; } } @media (max-width: 478px) { html { font-size: 17px; } }

I’m unable to see the live site so cant see what you mean about the visibilty of the code. Can you provide a link to the site?

3

Awsome! Many thanks! I thought I had the logical order. :see_no_evil:

Do you have also a tipp for the html code flickering?

4

No problem Marc.

About the flickering. Can you provide more info? A link to the published site or a loom video?

I can’t see the issue in the designer so it’s hard to know what you mean.

5

Of course. Here is the link to a short loom: Loom | Free Screen & Video Recording Software | Loom

And here is the preview site: https://mhgrafikdesign-template.webflow.io/

There is a bit code in the upper left flickering.

6

Hey Marc,

Yeah I can see the flickering you are talking about.

The reason for this - you have some plain text inside your body tag. This text reads “html { font-size: 20px; }” so it’s a bit of your code that got loose:

text in body
text in body1888×880 68.3 KB

This can occur when CSS isn’t wrapped inside the tags that it needs to properly function.

Since this is happening on every page it’s likely that this error is found in the custom code area of your site settings. This isn’t something I can look at from your read only link so do you want to have a look yourself?

If you look in the custom code I think you will see something like this:

html { font-size: 20px; }
<style>
your code here
</style>

It could also be in the embed but looks like you removed it?

Cheers, Dave

7

Many thanks for your support! It was located in the custom code in the site settings. A remnant from the first attempts.

So everything is fine! Awesome! Many many thanks for the quick support!

8

My pleasure Mark, glad I could be helpful. Best, Dave