vw > rem for text -- stays in line with grid lines this way

This commit is contained in:
Thomas Smith 2022-09-15 18:57:56 -04:00
parent a5696c9cfd
commit 4315c7c163
2 changed files with 9 additions and 7 deletions

View file

@ -30,7 +30,7 @@
.hero-section{ .hero-section{
background-image: url("/Images/x-large-grid-hero.svg"); background-image: url("/Images/x-large-grid-hero.svg");
background-attachment: fixed; background-attachment: fixed;
background-position: center-top; background-position: top;
background-repeat: repeat; background-repeat: repeat;
background-size: contain; background-size: contain;
} }

View file

@ -10,7 +10,7 @@ body{
.container{ .container{
max-width: 1920px; max-width: 1920px;
padding:0px; padding:20px;
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
@ -127,8 +127,8 @@ li{
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
h1{ h1{
font-size: 13.25rem; font-size: 11.5vw;
line-height: 14rem; line-height: 12.4vw;
margin-top: -20px; margin-top: -20px;
margin-left: -15px; margin-left: -15px;
} }
@ -162,7 +162,8 @@ li{
} }
} }
/* Medium Screens*/ /*
@media only screen and (min-width: 768px) and (max-width: 1200px) { @media only screen and (min-width: 768px) and (max-width: 1200px) {
h1{ h1{
@ -201,7 +202,7 @@ li{
} }
} }
/* Small Screens */
@media only screen and (max-width: 576px) and (max-width: 768px){ @media only screen and (max-width: 576px) and (max-width: 768px){
h1{ h1{
@ -240,7 +241,7 @@ li{
} }
} }
/* Extra Small Screens */
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
h1{ h1{
@ -277,6 +278,7 @@ li{
} }
} }
*/
/* Spacers & Dividers */ /* Spacers & Dividers */