Question

I am sorry to ask a simple question but I am trying to use a different style sheet when the window gets smaller or a mobile device is used. Nothing happens when I shrink the browser window smaller. Here is the media query.

<link rel="stylesheet" type="text/css" href="css.css" />
    <link rel="stylesheet" type="text/css"
     media="screen and (max-device-width:500px)"
     href="2ndCss.css" />

Can someone explain why it’s not doing anything? I have tried making the max-device width smaller and I have tried setting it to max-width instead.

Answer 1

If you take careful note of what you have in your media attribute, you will notice that you are using max-device-width. What that means is that the physical device must have a screen size of 500px or less for the media query to kick in. Resizing your browser doesn’t change the physical size of your screen.

You may be better served using max-width instead of max-device-width.