My laptop size media query is not applying the CSS styles I want. I have tried using both min and max width but without success. I am trying to replicate the layout found here:
@media screen and (min-width: 960px) and (max-width:1199px){
.grid-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
/* grid-template-rows: 430px 250px; */
grid-template-rows: auto auto;
padding: 0px;
margin: 50px 0px 50px 0px;
}
.featureLeft{
position: relative;
right: -30px;
}
.featureRight{
position: relative;
left: 50px;
}
.marginBottom{
position: relative;
bottom: 30px;
}
.features{
width:400px
}
p{
font-size: 16px;
}
h1{
font-size: 25px;
}
h2{
word-wrap: break-word;
font-size: 1.125rem;
}
.grid-container>div {
text-align: left;
padding: 30px
}
.container {
width: 90%;
margin-left: 10px;
}
.the-feed {
grid-area: 1 / 1 / 3 ;
margin-left: 160px;
}
.feed-image{
height: 305px;
margin-top: 50px;
width: 200px;
position: relative;
right: 30px
}
}
/* desktop styles */
@media screen and (min-width: 1200px){
.grid-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
/* grid-template-rows: 430px 250px; */
grid-template-rows: auto auto;
padding: 0px;
margin: 50px 0px 50px 0px;
}
.featureLeft{
position: relative;
right: -30px;
}
.featureRight{
position: relative;
left: 50px;
}
.marginBottom{
position: relative;
bottom: 30px;
}
.features{
width:400px
}
p{
font-size: 16px;
}
h1{
font-size: 25px;
}
h2{
word-wrap: break-word;
font-size: 1.125rem;
}
.grid-container>div {
text-align: left;
padding: 30px
}
.container {
width: 1300px;
margin-left: 20px;
}
.the-feed {
grid-area: 1 / 1 / 3 ;
margin-left: 160px;
}
.feed-image{
height: 305px;
margin-top: 50px;
width: 200px;
position: relative;
right: 30px
}
}I have managed to get the grid layout working, but on my desktop, the spacing seems off. When I try to bring the features closer together, it impacts the layout on my laptop even though I have separate media queries set up.
Here is my codepen link for reference: https://codepen.io/shuibcodes/pen/xxqWajO