Why is my CSS grid layout not responsive? - html

Question

I've been having trouble with my CSS grid. I used the repeat function, but it just messed up my layout and the webpage still isn't responsive. I want it to display an image when the max width is 600px, and show my periodic table design when the width is above that. I'm new to front-end development and could really use some help. Thanks for taking the time to read this!
.container { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
width: 100vw;
height: 100vh;
}
.noble-gas { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"he"
"ne"
"a"
"ky"
"xe"
"rn"
"og";
grid-area: 2 / 20 / 9 / 21;
}
.rn, .og, .xe, .ky, .a, .ne, .he, .h {
background-color: #dea4a2;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.rn { grid-area: rn; }
.og { grid-area: og; }
.xe { grid-area: xe; }
.ky { grid-area: ky; }
.a { grid-area: a; }
.ne { grid-area: ne; }
.he { grid-area: he; }
.halogen { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"f"
"cl"
"br"
"i"
"at"
"ts";
grid-area: 3 / 19 / 9 / 20;
}
.ts, .at, .i, .br, .cl, .f {
background-color: #c2a8a9;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.ts { grid-area: ts; }
.at { grid-area: at; }
.i { grid-area: i; }
.br { grid-area: br; }
.cl { grid-area: cl; }
.f { grid-area: f; }
.non-metal { display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"c n o"
". p s"
". . se";
grid-area: 3 / 16 / 6 / 19;
}
.se, .s, .o, .n, .p, .c {
background-color: #d19595;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.se { grid-area: se; }
.s { grid-area: s; }
.o { grid-area: o; }
.n { grid-area: n; }
.p { grid-area: p; }
.c { grid-area: c; }
.semimetal { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"b . . ."
". si . ."
". ge as ."
". . sb te"
". . . po";
grid-area: 3 / 15 / 8 / 19;
}
.po, .te, .sb, .as, .ge, .si, .b {
background-color: #f4b8b0;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.po { grid-area: po; }
.te { grid-area: te; }
.sb { grid-area: sb; }
.as { grid-area: as; }
.ge { grid-area: ge; }
.si { grid-area: si; }
.b { grid-area: b; }
.basic-metal { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"al . . ."
"ga . . ."
"in sn . ."
"tl pb bi ."
"nh fi mc lv";
grid-area: 4 / 15 / 9 / 19;
}
.lv, .mc, .fi, .nh, .bi, .pb, .tl, .sn, .in, .ga, .al {
background-color: #bd8c88;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.lv { grid-area: lv; }
.mc { grid-area: mc; }
.fi { grid-area: fi; }
.nh { grid-area: nh; }
.bi { grid-area: bi; }
.pb { grid-area: pb; }
.tl { grid-area: tl; }
.sn { grid-area: sn; }
.in { grid-area: in; }
.ga { grid-area: ga; }
.al { grid-area: al; }
.lanthonide { grid-area: 7 / 5 / 8 / 6;
background-color: #ffe0e1;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);}
.actinide { grid-area: 8 / 5 / 9 / 6;
background-color: #c8807d;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247); }
.transition-metal { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"sc ti v cr mn fe co ni cu zn"
"y zr nb mo tc ru rh pd ag cd"
". hf ta w re os ir pt au hg"
". rf db sg bh hs mt ds rg cn";
grid-area: 5 / 5 / 9 / 15;
}
.zn, .cd, .hg, .cn, .rg, .au, .ag, .cu, .ni, .pd, .pt, .ds, .co, .rh, .ir, .mt, .fe, .ru, .os, .hs, .mn, .tc, .re, .bh, .cr, .mo, .w, .sg, .db, .ta, .nb, .v, .rf, .hf, .zr, .ti, .y, .sc {
background-color: #e7cace;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.zn { grid-area: zn; }
.cd { grid-area: cd; }
.hg { grid-area: hg; }
.cn { grid-area: cn; }
.rg { grid-area: rg; }
.au { grid-area: au; }
.ag { grid-area: ag; }
.cu { grid-area: cu; }
.ni { grid-area: ni; }
.pd { grid-area: pd; }
.pt { grid-area: pt; }
.ds { grid-area: ds; }
.co { grid-area: co; }
.rh { grid-area: rh; }
.ir { grid-area: ir; }
.mt { grid-area: mt; }
.fe { grid-area: fe; }
.ru { grid-area: ru; }
.os { grid-area: os; }
.hs { grid-area: hs; }
.mn { grid-area: mn; }
.tc { grid-area: tc; }
.re { grid-area: re; }
.bh { grid-area: bh; }
.cr { grid-area: cr; }
.mo { grid-area: mo; }
.w { grid-area: w; }
.sg { grid-area: sg; }
.db { grid-area: db; }
.ta { grid-area: ta; }
.nb { grid-area: nb; }
.v { grid-area: v; }
.rf { grid-area: rf; }
.hf { grid-area: hf; }
.zr { grid-area: zr; }
.ti { grid-area: ti; }
.y { grid-area: y; }
.sc { grid-area: sc; }
.alkaline-earth { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"be"
"mg"
"ca"
"sr"
"ba"
"ra";
grid-area: 3 / 4 / 9 / 5;
}
.ra,.ba,.sr,.ca,.mg,.be {
background-color: #c8a0a1;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.ra { grid-area: ra; }
.ba { grid-area: ba; }
.sr { grid-area: sr; }
.ca { grid-area: ca; }
.mg { grid-area: mg; }
.be { grid-area: be; }
.alkali-metal { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.4rem 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"li"
"na"
"k"
"rb"
"cs"
"fr";
grid-area: 3 / 3 / 9 / 4;
}
.fr,.cs,.rb,.k,.na,.li {
background-color: #ffe0e1;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.fr { grid-area: fr; }
.cs { grid-area: cs; }
.rb { grid-area: rb; }
.k { grid-area: k; }
.na { grid-area: na; }
.li { grid-area: li; }
.non-metal2 { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"h";
grid-area: 2 / 3 / 3 / 4;
}
.h { grid-area: h; }
.lanthonide2 { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"la ce pr nd pm sm eu gd tb dy ho er tm yb lu";
grid-area: 10 / 5 / 11 / 20;
}
.la,
.ce,
.pr,
.nd,
.pm,
.sm,
.eu,
.gd,
.tb,
.dy,
.ho,
.er,
.tm,
.yb,
.lu,
.la {
background-color: #ffe0e1;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.la { grid-area: la; }
.ce { grid-area: ce; }
.pr { grid-area: pr; }
.nd { grid-area: nd; }
.pm { grid-area: pm; }
.sm { grid-area: sm; }
.eu { grid-area: eu; }
.gd { grid-area: gd; }
.tb { grid-area: tb; }
.dy { grid-area: dy; }
.ho { grid-area: ho; }
.er { grid-area: er; }
.tm { grid-area: tm; }
.yb { grid-area: yb; }
.lu { grid-area: lu; }
.actinide2 { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0.4rem;
grid-auto-flow: row;
grid-template-areas:
"ac th pa u np pu am cm bk cf es fm md no lr";
grid-area: 11 / 5 / 12 / 20;
}
.ac,
.th,
.pa,
.u,
.np,
.pu,
.am,
.cm,
.bk,
.cf,
.es,
.fm,
.md,
.no,
.lr {
background-color: #c8807d;
padding-left: 8%;
border-radius: 3px;
box-shadow: 0px 2.5px 3px 2px rgba(27, 1, 22, 0.247);
}
.ac { grid-area: ac; }
.th { grid-area: th; }
.pa { grid-area: pa; }
.u { grid-area: u; }
.np { grid-area: np; }
.pu { grid-area: pu; }
.am { grid-area: am; }
.cm { grid-area: cm; }
.bk { grid-area: bk; }
.cf { grid-area: cf; }
.es { grid-area: es; }
.fm { grid-area: fm; }
.md { grid-area: md; }
.no { grid-area: no; }
.lr { grid-area: lr; }
number {
color: #1a030371;
font-size: 7px;
font-family: Barlow, sans-serif;
font-style: thin;
text-transform: uppercase;
justify-self: center;
align-self: center;
text-shadow: 2px 2px 5px rgba(52, 2, 25, 0);
}
element {
color: #2c2c2c;
font-size: 15px;
font-family: Barlow, sans-serif;
font-style: bold;
text-transform: uppercase;
padding-left: 20px;
justify-self: center;
align-self: center;
text-shadow: 2px 2px 5px rgba(52, 2, 25, 0.527);
}
element_name {
color: #1a030382;
font-size: 7px;
font-family: Barlow, sans-serif;
font-style: bold;
text-transform: uppercase;
justify-self: center;
align-self: center;
text-shadow: 2px 2px 5px rgba(52, 2, 25, 0.402);
}
atomic_number {
color: #1a030361;
font-size: 8px;
font-family: Barlow, sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
text-shadow: 2px 2px 5px rgba(52, 2, 25, 0.192);
}