Incorporating a mobile-first approach to media queries, I have implemented min-width settings at 37.5em and 50em for tablets and desktops.
I want the project section to be displayed as a column on mobile devices and as a row on desktops, but it seems like the desktop media query is taking precedence over everything else.
Here's the HTML code:
<section id="projects">
<h2>Projects</h2>
<div id="projects_container">
<figure class="hvr-float-shadow">
<img src="ImagePlaceholder.png">
<figcaption>Random Quote <br> Generator</figcaption>
</figure>
<figure>
<img src="ImagePlaceholder.png">
<figcaption>Random Quote <br> Generator</figcaption>
</figure>
... more figure elements here ...
<figure>
<img src="ImagePlaceholder.png">
<figcaption>Random Quote <br> Generator</figcaption>
</figure>
</section>For the mobile-first CSS:
#projects{
padding-top: 5rem;
padding-bottom: 15rem;
background-color: #FFFAFA;
flex-direction: column;
justify-content: center;
margin: 0 auto;
display: flex;
}
#projects_container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
figure{
display: block;
position: relative;
overflow: hidden;
width: 75%;
}
figure img {
width: 100%;
}
... additional styling rules ...
The problematic desktop media query:
@media (min-width: 50em) {
#projects_container {
flex-direction: row;
font-size: 145%;
align-items: center;
}
#unhide-text {
display: inline;
}
... additional styling for desktop devices ...
}
I believe that the media query should only take effect if the conditions are met.
What am I missing?