How to get CSS media attributes to work on mobile devices?-CodePudding

I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:

@media screen and (max-width:500px) {
  #education-table td {
    display: block;
    text-align: center;
  }
}

Thanks in advance!

I have looked at similar issues and thus added the "screen and", but this has not fixed the issue,

CodePudding user response：

This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.

The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.

CodePudding user response：

As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.

If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:

@media screen and (orientation: portrait) {
  #education-table td {
    display: block;
    text-align: center;
  }
}