Desktop-Medienabfrage, die alle Bildschirmgrößen überschreibt

Question

Ich implementiere den ersten mobilen Ansatz für Medienabfragen. Ich habe minimale Medienabfragen bei 37.5em und 50em für Tablet und Desktop festgelegt.

Ich möchte, dass der Projektabschnitt als Spalte für mobile und Zeile für Desktop angezeigt wird. Meine Desktop-Medienabfrage scheint alles andere überfahren zu haben.

HTML:

<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> 

<figure> 
    <img src="ImagePlaceholder.png"> 
    <figcaption>Random Quote <br> Generator</figcaption> 
</figure> 

<figure> 
    <img src="ImagePlaceholder.png"> 
    <figcaption>Random Quote <br> Generator</figcaption> 
</figure> 

<figure> 
    <img src="ImagePlaceholder.png"> 
    <figcaption>Random Quote <br> Generator</figcaption> 
</figure> 

<figure> 
    <img src="ImagePlaceholder.png"> 
    <figcaption>Random Quote <br> Generator</figcaption> 
</figure> 


</section> 

Mobile erster 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%; 
} 

figcaption { 
position: absolute; 
background: rgba(0,0,0,0.75); 
color: white; 
padding: 10px 20px; 
width: 100%; 


opacity: 0; 
bottom: 0; 
top: -30%; 
-webkit-transition: all 0.6s ease; 
-moz-transition: all 0.6s ease; 
-o-transition:  all 0.6s ease; 
} 

figure:hover figcaption { 
opacity: 1; 
top: 0; 
} 

Beleidigendes Desktop-Medienabfrage:

@media (min-width: 50em) { 
#projects_container { 
    flex-direction: row; 
    font-size: 145%; 
    align-items: center; 

} 
#unhide-text { 
display: inline; 
} 

figure{ 
display: block; 
position: relative; 
overflow: hidden; 
width: 25%; 
} 


.contact-container{ 

    flex-direction: row; 
    } 

} 

Mein Verständnis ist, dass die Medien-Abfrage sollte nur dann Anwendung, wenn die Kriterien erfüllt sind .

Was fehlt mir?

https://sandbagger.github.io/MyPortfolio/

Answer 1

Statt em Verwendung px. Und überprüfen Sie die Haltepunkte für tablets und mobiles.