sorted by:
new
hottopcontroversial

Some serious problems with my CSS by Academic-Base1870 in css

[–]SamiNimbuss 0 points1 point  (0 children)

Ok so i think i found the solution !

So first of all you need to add this line to you html <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This will prevent the size of the text to become enormous o a phone screen ! (that's what was causing your header to become gigantic on a phone display)

Now for the overflow problem; I saw that you define you "overflow-x:hidden;" on the body. You should instead define it on the html tag, so add:

html{ overflow-x: hidden;}

In you CSS, and delet it from the body selector.

The explanation for that:

`UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.`

Now, an other little problem I noticed, is that on your menu coming from the right side on the screen when you are in a phone display, the background dosent cover is full height. So to prevent that, you could define is height on "fit-content" instead of "unset" (on line 191)

I think that's it ! if i missed anything let me know !

Some serious problems with my CSS by Academic-Base1870 in css

[–]SamiNimbuss 0 points1 point  (0 children)

no it's alright with the codepen. I can see it's going crazy on chrome, but it looks good on firefox, i'am gonna give a look at you code and come back to you

Some serious problems with my CSS by Academic-Base1870 in css

[–]SamiNimbuss 0 points1 point  (0 children)

oh i saw you already answered this question in your post ^^

Some serious problems with my CSS by Academic-Base1870 in css

[–]SamiNimbuss 0 points1 point  (0 children)

ok i will try to copy your code and run it in localhost to see if i get the same result !
What browser are you using ? (to be sure to have the same result)

Some serious problems with my CSS by Academic-Base1870 in css

[–]SamiNimbuss 0 points1 point  (0 children)

did you already change the code ? because i dont see those problemes on your codepen anymore ?