I'm working on a project where I need to display three separate articles based on the screen size.
Article 1 should only be visible when the screen width is less than 600 pixels
Article 2 should be visible between 600 and 900 pixels
Article 3 should be visible when the screen width is greater than 900 pixels
Here is how I've set up the CSS:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/r0755939basic.css">
<link rel="stylesheet" media="screen and (min-width: 600px)" href="styles/r0755939medium.css" />
<link rel="stylesheet" media="screen and (min-width: 900px)" href="styles/r0755939large.css" />
All the articles follow this format:
<article id="article1"><p>article1</p></article>
I've applied different CSS styles to each article in their respective stylesheet:
article {
display: none;
}
#article1{
display: block;
}
The issue I'm facing is that only the condition for less than 600 pixels is working correctly. When the screen size is larger, both Article 1 and Article 2 are displayed, and when it's even bigger, all three articles are shown. Can anyone help me understand why this is happening?