Question posted in 
so im trying to build out a website for different screen sizes. now ive included a card section into this that is included into my website. now when my screen is at full size eg >1300px in width it should be 5 wide now when it gets to 1300px wide i dont want it to change but when it gets to 1024px wide i wanted it to drop down to 3 wide which it does however as soon as i get to the 614px wide section i want it to activate and change the amounnt of displays per row to two rather than the 3 when the screen size is greater than 614px wide.
5 wide
so this is how i wanted it to look when the screen was > 1024px wide which it does
3 wide
once i get to < 1024px wide it goes to 3 wide just fine
should be 2 wide
But as soon as i go past that 614px wide mark the @media screen and (max-width: 614px) dosent kick in for some reason
however if i change it to @media screen and (min-width: 614px) the media changes do affect it but it stops the rest of the media effects from working ive even tried switching around other media effects min and max values nothing i seem to do can get them to work all indivually
.third-main {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1420px;
margin: 40px;
padding: 20px 20px 100px 20px;
}
.column2 {
flex: 1;
max-width: 170px;
text-align: center;
margin: 0 40px;
box-sizing: border-box;
}
.card {
background-color: rgba(255, 255, 255, 0.85) ;
padding: 5px;
width: 250px;
height: 330px;
transition: ease 0.5s;
margin: 2px 2px;
}
.card img {
display: block;
width: 170px;
max-width: 100%;
height: 170px;
max-height: 100%;
object-fit: contain;
margin: auto;
justify-content: center;
transition: ease 0.5s;
}
.card h2{
font-size: 30px;
font-family: 'Oswald', sans-serif;
color: #232323;
height: 80px;
width: 200px
}
.card p{
font-size: 25px;
font-family: 'Oswald', sans-serif;
color: #C49954;
}
.card a{
border: 20px #C49954;
padding: 2px;
}
.card hr{
border: 2px solid #C49954;
width: 50%;
transition: ease 0.5s;
}
.card:hover hr{
border: 2px solid #C49954;
width: 75%;
transition: ease 0.5s;
}
.card:hover{
background-color: #FFFFFF;
transition: ease 0.5s;
}
.card:hover img{
transform: scale(1.1);
transition: ease 0.5s;
z-index: -1;
}
.card:hover h2{
transform: scale(1.03);
transition: ease 0.5s;
}
.card:hover p{
transform: scale(1.03);
transition: ease 0.5s;
}
.card:hover a{
transform: scale(1.03);
transition: ease 0.5s;
}
@media screen and (max-width: 1300px){
}
@media screen and (max-width: 1024px) and (min-width: 615px){
}
.column2{
width: calc(33% - 60px);
justify-content: center;
}
.card{
width: calc(100% - 15px);
margin: 2px 2px;
}
}
@media screen and (max-width: 614px)
{
/*index.html styling*/
}
.column2{
width: calc(50% - 60px);
justify-content: center;
}
.card{
width: calc(100% - 15px);
margin: 2px 2px;
}
}<div class="third-main">
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/201/200">
<br>
<hr>
<h2>Robotic Mowers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/202/200">
<br>
<hr>
<h2>Commerical Mowers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/203/200">
<br>
<hr>
<h2>Residential Mowers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/204/200">
<br>
<hr>
<h2>Power Equipment</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/206/200">
<br>
<hr>
<h2>Accessories & Saftey Gear</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/208/200">
<br>
<hr>
<h2>Cargo Trailers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/209/200">
<br>
<hr>
<h2>Livestock Trailers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/210/200">
<br>
<hr>
<h2>Dump Trailers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/211/200">
<br>
<hr>
<h2>Utility & Landscape Trailers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card">
<img src="http://picsum.photos/id/212/200">
<br>
<hr>
<h2>Deckover Trailers</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card" id="card3">
<img src="http://picsum.photos/id/213/200">
<br>
<hr>
<h2>Equipment Rentals</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card" id="card3">
<img src="http://picsum.photos/id/214/200">
<br>
<hr>
<h2>New Heavy Equipment</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card" id="card3">
<img src="http://picsum.photos/id/215/200">
<br>
<hr>
<h2>Used Heavy Equipment</h2>
<br>
<p>Learn More</p>
</div>
</div>
<div class="column2">
<div class="card" id="card3">
<img src="http://picsum.photos/id/216/200">
<br>
<hr>
<h2>Attachments</h2>
<br>
<p>Learn More</p>
</div>
</div>
</div>I have tried just about everything on stack and am just at a loss for where to go with this any help would be apreciated if you want the full css file i can paste it here or anything else from my files thats referenced i can include i just have a feeling that its with the @media querys itself.
2
Answers
only thing that i can see is that you have to ensure that the styles defined in each of these media queries don’t conflict with each other, as the ranges overlap (for example, a device with a width of 614px would match both the second and third media queries). Try changing to 615px in the 2nd.
For your desired layout the best solution is a grid, with media queries controlling the number of columns.
When writing stylesheets, best practice is to follow a mobile-first approach. Start with the mobile styles, then add media queries where necessary to specify styles for wider screens, in increasing order of width.
After running this snippet, make sure to use the full page link to test the responsive behaviour.