diff --git a/index.css b/index.css index 691e46e..805b781 100644 --- a/index.css +++ b/index.css @@ -5,7 +5,6 @@ header { align-items: center; display: flex; - height: 10vh; background-color: deeppink; margin-bottom: 1vh; } @@ -88,7 +87,7 @@ footer{ } } -@media only screen and (max-width: 500px) { +@media screen and (max-width: 400px) { [class*="bannerHeader"] { font-size: 7vh; color: #fff; @@ -108,9 +107,10 @@ footer{ grid-row-start: 2; grid-row-end: 2; } - [class*="infoContainer"] { - display: grid; - grid-template-columns: auto; + .infoContainer { + margin-left: 10vw; + margin-right: 10vw; + display: grid; } [class*="infoImg"] { width: 60vw; @@ -119,11 +119,22 @@ footer{ .linkContainer { grid-template-columns: auto auto; } - .info { - font-size: 6vw; + [class*="info"] { + font-size: 8vw; + } + .infoDiv { + display: grid; + width: 80vw; + text-align: left; + justify-content: center + justify-self: none; } + .infoHeader { - font-size: 9vw; + font-size: 10vw; + margin-top: 5vw; + margin-bottom: 0vw; + color: deeppink; } .grid-container { display: grid; @@ -139,6 +150,19 @@ footer{ } } +@media screen and (min-width: 400px) { + + .info { + font-size: 2vw; + } + .infoDiv { + display: grid; + width: 50vw; + text-align: justify; + justify-content: center + justify-self: none; + } + .infoImg { width: 30vw; } @@ -157,17 +181,6 @@ footer{ justify-self: none; } -.infoDiv { - display: grid; - width: 50vw; - text-align: justify; - justify-content: center - justify-self: none; -} - -.info { - font-size: 2vw; -} .infoHeader { font-size: 3vw; @@ -176,16 +189,6 @@ footer{ color: deeppink; } -.model0 { - width: 50vw; - height: 100vh; -} -.model1 { - width: 50vw; - height: 100vh; -} -.grid-container { - display: grid; - grid-template-columns: auto auto; } + diff --git a/index.php b/index.php index cbdd0da..a8c353f 100644 --- a/index.php +++ b/index.php @@ -43,7 +43,7 @@