Hjälp med grids!
Hej! Sitter just nu och försöker skapa grids till en webbsida som ett projekt i skolan. Har skapat koden och i min webbläsare ser den ok ut, men den är inte responsiv så att när man förminskar webbfönstret så hänger inte sakerna med och "läggs om" och misstänker därför också att den inte skulle fungera i mobilskärmar eller surfplattor. Har försökt klura ut hur jag ska göra för att få den responsiv med hjälp av grids men om jag ändrar min nuvarande kod utefter föreläsningarnas sätt att göra den responsiv så blir webbsidan helt knas.
Så jag tänkte slänga ut ett rop på hjälp här om någon har något tips/åsikt om min kod och hur jag enklast kan göra den responsiv.
Min webbsida består av header, aside, articles(ligger inom .nested), sidebar och footer som alla ligger i klasser. Sedan ser min CSS ut såhär (har dock tagit bort den oviktiga koden som bara är rent utseendemässigt, detta är bara grids-delarna) :
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
background-color: white;
color: black;
}
.nested {
display: grid;
grid-template-columns: 2fr 2fr;
grid-gap: 1em;
grid-auto-columns: minmax(10px, auto);
}
.box {
background-color: white;
}
.header {
grid-column: 1 / 4;
background-color: rgb(247, 247, 230);
font-family: 'Parisienne', cursive;
color: silver;
padding: 25px 50px 25px;
border-style: solid;
border-width: 2.5px;
border-color: lightslategrey;
box-shadow: 4px 5px lightgray;
}
.aside {
grid-column: 1 / 2;
width: 18em;
background-color: rgb(247, 247, 230);;
padding: 25px 50px 25px;
font-size: 15px;
padding: 25px 25px 25px;
border: 2.5px solid lightslategray;
box-shadow: 2px 3px lightgray;
}
.sidebar{
grid-column: 3 / 3;
width: 6em;
height: 5em;
border: 3px dotted beige;
padding: 1em;
}
.footer {
grid-column: 1 / span 3;
background-color:rgb(247, 247, 230);;
font-family: 'Playfair Display', serif;
padding: 25px 50px 25px;
border-style: solid;
border-width: 2.5px;
border-color: lightslategrey;
margin: 1em;
}
.besok {
display: grid;
grid-template-columns: 1fr 1fr;
margin-left: 10em;
}
.article1, .article2, .article3, .article4 {
font-family: 'Playfair Display', serif;
}
Så, någon som har något tips för hur jag ska få min webbsida responsiv och funka för mobiler/mindre skärmar också? Vill helst inte behöva koda om allting så jag hoppas någon kan hjälpa mig!
Jag tar även gärna emot andra tips/åsikter om koden om den kan förbättras något, vill gärna lära mig så mycket som möjligt så går den att få bättre (vilket jag inte tvekar på då jag är nybörjare på grids) så vill jag gärna veta det.
Tack på förhand!
