Kevin Powell - Community•3d ago

CSS Grid not resizing on media query with new grid-template-columns

Full disclosure: I'm working in react using react.modules.css file structure. I originally set up my grid-template-column as 1fr 1fr auto 2fr and I'm trying to change it to just a 1fr 1fr structure at smaller screen sizes. Not entirely sure what I'm doing wrong. https://cherished-moments.vercel.app/ current deployed version of the code. CSS

.footerGrid {
  display: grid;

  grid-template-columns: 1fr 1fr auto 2fr;
  gap: 1rem;
}

.footerGrid h3,
.footerGrid a {
  color: var(--primary-100);
  font-family: 'Montserrat';
}

.footerGrid > nav > ul > li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.footerGrid h3 {
  font-weight: 400;
}

.footerGrid nav h3 {
  margin-bottom: var(--spacing-xs);
}

.footerGrid input {
  width: calc(100% - 1rem);
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.footerGrid form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;

  gap: 0.75rem;
}

.footerGrid form h3,
.footerGrid form input:nth-child(4) {
  grid-column: 1/3;
}

.footerGrid button {
  font-size: 1rem;
  font-weight: 400;
}

.footerPadding {
  padding: var(--spacing-l);
}

@media screen and (max-width: 1000) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footerGrid nav:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .footerGrid nav:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .footerGrid img {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .footerGrid form {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

.footerGrid {
  display: grid;

  grid-template-columns: 1fr 1fr auto 2fr;
  gap: 1rem;
}

.footerGrid h3,
.footerGrid a {
  color: var(--primary-100);
  font-family: 'Montserrat';
}

.footerGrid > nav > ul > li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.footerGrid h3 {
  font-weight: 400;
}

.footerGrid nav h3 {
  margin-bottom: var(--spacing-xs);
}

.footerGrid input {
  width: calc(100% - 1rem);
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.footerGrid form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;

  gap: 0.75rem;
}

.footerGrid form h3,
.footerGrid form input:nth-child(4) {
  grid-column: 1/3;
}

.footerGrid button {
  font-size: 1rem;
  font-weight: 400;
}

.footerPadding {
  padding: var(--spacing-l);
}

@media screen and (max-width: 1000) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footerGrid nav:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .footerGrid nav:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .footerGrid img {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .footerGrid form {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

Create Next App

Generated by create next app

27 Replies

b1mind•3d ago

1000 is not valid unit you just forgot the px is all 😄

LexiOP•3d ago

... Thank you 😂

b1mind•3d ago

Few tips though don't use heading levels for font sizes they should make semantic sense, also grid-gap is not a thing anymore its just gap Also if you use multiple <nav> elements you need to give them names with different aria-labels for a11y 🙂

LexiOP•3d ago

Gotcha. In the case of a footer is there any heading that should be used?

b1mind•3d ago

nope I wouldn't use a heading level for them at all make it a <b> size it how you want in css

LexiOP•3d ago

any particular reason for using b?

b1mind•3d ago

nope I just like to 😂 if I want something bold and don't need it to be readout differently <strong> if I do Just one less thing to write in css 🤷‍♂️

LexiOP•3d ago

Thank you!

b1mind•3d ago

typically I would have a .title-sm util class or something too so it would only be the size but I could make it bold with <b class="title-sm"> if that makes any sense just a b thang Or I would just have that bold anyway and control lthe boldness with the class and still use <b> lol (lots of people will disagree with this though so thats a choice for you to make)

LexiOP•3d ago

So on set-up you'd have h1, title-xl {}, h2, title-l {}, h3 title-m {} etc?

b1mind•3d ago

YUP! I might separate them too depends on the design/sytem. Like if for some reason I had h2's that I want visually small but lots of times you can do like <h2 class="title-m"> in the case you setup

LexiOP•3d ago

Gotcha, makes sense. I'm still trying to learn best practices and definitely have a lot to learn for sure

b1mind•3d ago

np! you are doing great keep it up oh one last tip 😂

b1mind•3d ago

b1mind•3d ago

You are getting overscroll here I think cause the padding is on your wrapper class oh no I'm wrong sec

LexiOP•3d ago

I just now realized that

b1mind•3d ago

I would still put the padding on <footer> I'm not sure whats causing the h-scroll 😮

LexiOP•3d ago

Forgive my ignorance but h-scroll?

b1mind•3d ago

gah I love these wrappers ❤️ glad you are paying attention to Kevins recent stuff Horizontal scrolling

b1mind•3d ago

This is one those times I still wish I had Polypane browser.. I need to renew my sub Might want to open a new post for this and get some fresh eyes on that one. ( I need sleep bad) quick hack would be to set overflow-x: hidden; on body but its just a hack not solving the actual overflow

LexiOP•3d ago

I'm probably going to let it ride until tomorrow as well.

b1mind•3d ago

found it 😂

b1mind•3d ago

LexiOP•3d ago

🙃 -sigh-

b1mind•3d ago

So put overflow: hidden; on .page_decorative or the p child not sure. but thats your culprit

clevermissfox•3d ago

Btw instead of having to redeclare all the grid columns and grid rows in the media query, you can give the children grid-areas and save yourself a lot of grief. Make them more meaningful names but for this example I'll just something generic.

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

Instead of redeclaring all the children's grid-column or grid-row, you just redeclare the grid-areas in your grids

Gaming

Programming

CSS Grid not resizing on media query with new grid-template-columns