Working on hero section at mobile breakpoint.

This commit is contained in:
Thomas Smith 2022-09-27 18:22:44 -04:00
parent 663849e9f6
commit 26471952ad
4 changed files with 18 additions and 10 deletions

View file

@ -30,7 +30,7 @@
<div class="container hero-container"> <div class="container hero-container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Keep <span class="white">what</span><br><span style="float:right;"><span class="white">is</span> yours.</span></h1> <h1>Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -39,13 +39,13 @@
</div> </div>
</div> </div>
</div> </div>
</section>
<div class="full-width-cta-container"> <div class="full-width-cta-container">
{{- partial "full-width-cta.html" . -}} {{- partial "full-width-cta.html" . -}}
</div> </div>
<div class="hero-bottom"> <div class="hero-bottom">
</div> </div>
</section>
<!-- Teal Impact Section --> <!-- Teal Impact Section -->

View file

@ -241,7 +241,7 @@
} }
.button-container{ .button-container{
padding: 0vw 8vw !important; padding: 0vw 6.5vw !important;
} }
.dev-count{ .dev-count{

View file

@ -71,7 +71,7 @@
.container{ .container{
max-width: 1920px; max-width: 1920px;
padding: 6.7vw 5vw; padding: 5.4vw 3vw;
} }
} }
@ -241,14 +241,23 @@ hr{
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.hero-section{ .hero-section{
padding: 4vw !important;
}
.hero-container{
background-image: url("/Images/small-grid.svg"); background-image: url("/Images/small-grid.svg");
background-position: top; background-position: top;
background-repeat: repeat-y; background-repeat: repeat-y;
background-size: cover; background-size: cover;
padding-bottom: 16vw;
}
.hero-float{
float: none !important;
} }
.hero-bottom{ .hero-bottom{
height: 75px; height:10vw;
} }
.package_before{ .package_before{

View file

@ -230,8 +230,8 @@ li{
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
h1{ h1{
font-size: 24vw; font-size: 21.5vw;
line-height: 22vw; line-height: 20.4vw;
} }
h2{ h2{
@ -253,9 +253,8 @@ li{
} }
.lead{ .lead{
font-size: 28px !important; font-size: 4.800vw !important;
line-height: 29px !important; line-height: 5vw !important;
margin-bottom: 40px;
} }
p{ p{