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
b1mind5w ago
1000 is not valid unit you just forgot the px is all 😄
Lexi
LexiOP5w ago
... Thank you 😂
b1mind
b1mind5w 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 🙂
Lexi
LexiOP5w ago
Gotcha. In the case of a footer is there any heading that should be used?
b1mind
b1mind5w ago
nope I wouldn't use a heading level for them at all make it a <b> size it how you want in css
Lexi
LexiOP5w ago
any particular reason for using b?
b1mind
b1mind5w 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 🤷‍♂️
Lexi
LexiOP5w ago
Thank you!
b1mind
b1mind5w 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)
Lexi
LexiOP5w ago
So on set-up you'd have h1, title-xl {}, h2, title-l {}, h3 title-m {} etc?
b1mind
b1mind5w 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
Lexi
LexiOP5w ago
Gotcha, makes sense. I'm still trying to learn best practices and definitely have a lot to learn for sure
b1mind
b1mind5w ago
np! you are doing great keep it up oh one last tip 😂
b1mind
b1mind5w ago
No description
b1mind
b1mind5w ago
You are getting overscroll here I think cause the padding is on your wrapper class oh no I'm wrong sec
Lexi
LexiOP5w ago
I just now realized that
b1mind
b1mind5w ago
I would still put the padding on <footer> I'm not sure whats causing the h-scroll 😮
Lexi
LexiOP5w ago
Forgive my ignorance but h-scroll?
b1mind
b1mind5w ago
gah I love these wrappers ❤️ glad you are paying attention to Kevins recent stuff Horizontal scrolling
b1mind
b1mind5w ago
No description
b1mind
b1mind5w 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
Lexi
LexiOP5w ago
I'm probably going to let it ride until tomorrow as well.
b1mind
b1mind5w ago
found it 😂
b1mind
b1mind5w ago
No description
Lexi
LexiOP5w ago
🙃 -sigh-
b1mind
b1mind5w ago
So put overflow: hidden; on .page_decorative or the p child not sure. but thats your culprit
clevermissfox
clevermissfox5w 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
Want results from more Discord servers?
Add your server