为什么我的 CSS styles 没有应用于笔记本电脑媒体查询？

Question

My CSS styles arent being applied to my laptop size media query. I tried using a min and max width with no luck. Im looking to mimic this layout:

https://www.freshworks.com/crm/features/

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

Ive got the grid working but it seems to spaced on my desktop, when I move the features closer together, laptop size messes up even though I have seperate media queries

heres my codepen: https://codepen.io/shuibcodes/pen/xxqWajO

Answer 1

Actually your laptop media query styles are applied but they not seem to be styled correctly for the reference you shared.

Check these fixes.

@media screen and (min-width: 960px) and (max-width: 1199px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 50vw); //Changed
    
    ....

   .the-feed {
    grid-column: 1/-1; //Changed
  }

Full example: https://codepen.io/AravinthAro/pen/gOmeqjJ