tried to add mobile & tablet styling but it didn't work

This commit is contained in:
Your Name 2021-02-10 10:55:35 +01:00
parent 3f5ca55822
commit f492961eda

View File

@ -22,9 +22,9 @@ header#banner{
} }
header#banner h1{ header#banner h1{
font-family: 'Syne'; font-family: 'Syne';
font-size: 110px; font-size: 7.5vw;
line-height:1.25; line-height:1.25;
margin: 1em 0; margin: 0.7em 0;
} }
header#banner h1 a{ header#banner h1 a{
text-decoration: none; text-decoration: none;
@ -36,8 +36,8 @@ nav#menu{
margin:0 0 0 -11em; margin:0 0 0 -11em;
} }
nav#menu li{ nav#menu li{
width: 145px; width: 10vw;
height:10em; height:10vw;
margin:1em 0; margin:1em 0;
padding:1em; padding:1em;
font-size: 75%; font-size: 75%;
@ -53,14 +53,14 @@ nav#menu{
background-color: #95d1e6; background-color: #95d1e6;
} }
nav#menu li.pagelink{ nav#menu li.pagelink{
height: 1.5em; height: 2.5em;
} }
nav#menu a{ nav#menu a{
text-decoration: none; text-decoration: none;
} }
section#content{ section#content{
margin: 4em 0; margin: 4em;
} }
article{ article{
margin: 3em 0 2em 0; margin: 3em 0 2em 0;
@ -222,3 +222,38 @@ code{
font-size: smaller; font-size: smaller;
margin:4em 0; margin:4em 0;
} }
p {
word-break: break-word;
}
/* Layout phone */
@media (max-width:770px) {
nav#menu li {
width: 50vw;
height: 24vw;
font-size: 2em;
margin: 1em 0.1em;
}
header#banner h1 {
font-size: 10vw;
}
body{
margin-left: 9.4vw;
}
}
/* Layout tablet */
@media (max-width:1024px) {
body {
margin-left: 13vw;
}
nav#menu li {
height: 14vw;
}
}