Quincy Norbert Quincy Norbert - 2 months ago 22
CSS Question

Mediaqueries wont work? Responsive web

I'm currently trying to create a website with different media queries for different device sizes, the problem is, when I add a media query in the media-queries.css file for a different viewport the browser only reads one.

I recently added a media query for a maximum width of 1500 pixels, but now the media query for max-980px wont work.

Here's the css, anyone that can help me?

/************************************************************************************
smaller than 980
*************************************************************************************/

@media screen and (max-width: 980px) {

.slider-container {
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}

.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 300px;
}

.wrapper .slider-container #slideshow > div {
position: absolute;
}

.wrapper .slider-container #slideshow > div img {
border: 20px solid #00e800;
height: 100%;
}

}

/************************************************************************************
smaller than 1500
*************************************************************************************/

@media screen and (max-width: 1500px) {

.slider-container {
width: 100%;
height: 400px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}

.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 400px;
}

.wrapper .slider-container #slideshow > div {
position: absolute;
}

.wrapper .slider-container #slideshow > div img {
border: 15px solid #f3f70a;
height: 100%;
}

}

Answer

Add a min-width component to the larger max-width:

@media screen and (min-width:981px) and (max-width: 1500px) {

This should tell the system to segregate the two choices, as < 980 will also always be < 1500.

Comments