While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below:
body {
font-family: var(--s-font-family);
font-size: var(--normal-font-size);
column-count: 3;
column-gap: 10px;
}
@media screen and (min-width: 800px) {
body {
column-count: 3;
column-gap: 10px;
}
}
@media screen and (min-width: 600px) and (max-width: 799px) {
body {
column-count: 2;
column-gap: 8px;
}
}
@media screen and (max-width: 599px) {
body {
column-count: 1;
column-gap: 0;
}
}
You can find this code snippet in the CSS stylesheet.
Upon testing this code on my desktop computer using Firefox 70, adjusting the browser window width results in the expected behavior. However, when I view the page on my smartphone (which has a size of 774x412 px, as confirmed by webfx), I consistently see three columns displayed, seemingly ignoring the media queries set in the CSS.
Where could the issue potentially lie?