diff --git a/styles/services.css b/styles/services.css index 9696643..5262251 100644 --- a/styles/services.css +++ b/styles/services.css @@ -84,4 +84,39 @@ margin: 0 auto; width: 9rem; } +} + +/* At smaller than 520px the fonts get too large to fit in one line */ +@media only screen and (max-width: 520px) { + .services__heading { + font-size: 3.8rem; + } + .services__offers__card__heading { + font-size: 2.5rem; + } + .services__offers__card__description { + font-size: 1.1rem; + } +} +/* At smaller than 380px the fonts get too large again to fit in one line */ +@media only screen and (max-width: 380px) { + .welcome__text-area__description { + font-size: 1.7rem; + } + .services__heading { + font-size: 4rem; + } + .services__offers__card__heading { + font-size: 2.8rem; + } + .services__offers__card__description { + font-size: 1.3rem; + } + .services__offers_card__button { + width: 14rem; + font-size: 1.3rem; + } + .services__offers__card__description { + width: 13rem; + } } \ No newline at end of file diff --git a/styles/welcome.css b/styles/welcome.css index b4d1317..e6f00c3 100644 --- a/styles/welcome.css +++ b/styles/welcome.css @@ -34,4 +34,17 @@ text-align: center; margin-left: 12vw; margin-right: 12vw; +} + +/* At smaller than 520px the fonts get too large to fit in one line */ +@media only screen and (max-width: 520px) { + :root { + font-size: .8em; + } +} +/* At smaller than 380px the fonts get too large again to fit in one line */ +@media only screen and (max-width: 380px) { + :root { + font-size: .6em; + } } \ No newline at end of file