CSS media query problems

The media queries themselves are not the main issue. The actual problem is that the layout still uses fixed pixel widths, so on small screens the content cannot shrink to fit the viewport.

In your default styles, .box is 1860px wide and hr is 1820px wide. Even in your smaller breakpoints, they are still assigned fixed widths such as 460px, 1004px, 1260px, or 1500px. That makes the layout rigid instead of responsive.

There is also a cascade issue in the order of your media queries.

On a phone-sized screen, all of these rules match at the same time:

@media (max-width: 480px) @media (max-width: 800px) @media (max-width: 1024px) @media (max-width: 1280px) @media (max-width: 1600px)

Because they are all max-width queries, a very small screen matches every larger breakpoint as well. When that happens, the last matching rule wins. In your stylesheet, the 1600px media query comes after the smaller ones, so it overrides them and sets:

.box { width: 1500px; } hr { width: 1480px; }

That is why the page becomes wider than the mobile viewport.

So the problem is not that media queries are “not working”. They are working, but the later rules override the earlier ones, and the layout still depends on fixed widths.

A responsive solution is to make the content fluid and only limit it with max-width. In other words, let the elements use the available screen width instead of forcing a specific pixel width.

This version keeps the same idea but makes it responsive:

@font-face { font-family: 'Lemon-Milk'; src: url('../fonts/lemon-milk.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/roboto.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } #wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('../img/bg.jpg'); } .box { width: 100%; max-width: 1860px; padding: 0 20px; margin: 0 auto; text-align: center; color: #fff; } p { font-size: 20px; font-family: 'Roboto', sans-serif; } .domains { font-size: 14px; font-family: 'Lemon-Milk', sans-serif; } .impressum { font-size: 14px; padding-top: 20px; } em { color: #c6ff00; } a { color: #c6ff00; text-decoration: none; } hr { width: 100%; max-width: 1820px; height: 1px; border: none; margin: 20px auto; background-color: #fff; } .footer { font-size: 12px; padding-top: 20px; } @media (max-width: 1600px) { #wrapper { background-image: url('../img/bg-1600px.jpg'); } } @media (max-width: 1280px) { #wrapper { background-image: url('../img/bg-1280px.jpg'); } } @media (max-width: 1024px) { #wrapper { background-image: url('../img/bg-1024px.jpg'); } p { font-size: 16px; } .domains { font-size: 12px; } .impressum { font-size: 14px; } .footer { font-size: 12px; } } @media (max-width: 800px) { #wrapper { background-image: url('../img/bg-800px.jpg'); } } @media (max-width: 480px) { #wrapper { background-image: url('../img/bg-480px.jpg'); } p { font-size: 16px; } .domains { font-size: 12px; } .impressum { font-size: 12px; } .footer { font-size: 10px; } }

The important changes are:

.box uses width: 100% and max-width instead of a fixed width. hr also uses width: 100% and max-width. The media queries are ordered from larger to smaller, so narrower breakpoints can override wider ones correctly. The layout gets horizontal padding, so text does not touch the screen edges on mobile devices.

With those changes, the content can scale down to the device width instead of forcing the phone to render a desktop-sized layout.