Kevin Powell - Community•3y ago

Downgrade from 4 to 2 in 1 row

hi how can i under 1200px that services section it so that there are 2 boxes in 1 row https://codepen.io/zopdry/pen/xxjvobW

fatih

CodePen

xxjvobW

...

4 Replies

13eck•3y ago

On line 102 of your CSS there's an } that doesn't belong to anything so all the code below it is considered invalid and isn't being parsed. That's why the media queries aren't running. But really, replace your .services-grid with

.services-grid {
  --repeat-num: 1;
    display: grid;
    grid-template-columns: 
  repeat(var(--repeat-num), 1fr);
    padding: 1rem;
}

.services-grid {
  --repeat-num: 1;
    display: grid;
    grid-template-columns: 
  repeat(var(--repeat-num), 1fr);
    padding: 1rem;
}

And remove everything from line 102 down with:

@media screen and (min-width: 35rem) {
  .services-grid {
    --repeat-num: 2;
  }
}

@media screen and (min-width: 75rem) {
  .services-grid {
    --repeat-num: 4;
  }
}

@media screen and (min-width: 35rem) {
  .services-grid {
    --repeat-num: 2;
  }
}

@media screen and (min-width: 75rem) {
  .services-grid {
    --repeat-num: 4;
  }
}

And you should be good Of course you can mess with the sizes for doubling the number of columns, but it should get you started!

Unknown User•3y ago

Message Not Public

13eck•3y ago

I've been at it for a good long while. There are benefits of being old lol I like using rem because it respects any settings the user puts into place, viewport units and pixels don't. It's not the norm, sadly, but it should be

fatihinnOP•3y ago

it is worked so good thank you

Gaming

Programming

Downgrade from 4 to 2 in 1 row