No CSS styling after resizing browser

StackOverflow https://stackoverflow.com/questions/22148396

  •  19-10-2022
  •  | 
  •  

Question

I use media queries:

<head>

<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1600px)" type="text/css" href="css/style1600.css" />

</head>

It works on full window browser, but when I resize browser all CSS styling just goes away.

Was it helpful?

Solution

This is because you are using media queries so that the styles defined in your stylesheet will only get applied when the browser width is between 1431px and 1600px. So if you resize your browser window to 800px these styles will no longer apply.

If you want the styles to apply to the whole document you should remove the media query so it looks like this

<link rel="stylesheet" media="screen" type="text/css" href="css/style1600.css" />

Or you could use two stylesheets

<!-- These styles apply to the who document -->
<link rel="stylesheet" media="screen" type="text/css" href="css/style1600.css" />
<!-- These only apply when the browser width is between 1431px and 1600px -->
<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1600px)" type="text/css" href="css/style1600.css" />

If you don't know much about media queries at the moment here is a guide article to get you started

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top