/apps/: Add max-width constraint to hero content.

This adds a max-width constraint to the hero content so that the images
inside the hero don’t keep expanding forever and eventually outside of
the hero’s bounds.

Fixes: #6713.
This commit is contained in:
Brock Whittaker 2017-09-27 09:15:12 -07:00 committed by Tim Abbott
parent c1c19eb8c9
commit 7f3b4c5baf
2 changed files with 31 additions and 15 deletions

View File

@ -1633,6 +1633,11 @@ nav ul li.active::after {
overflow: hidden;
}
.portico-landing.apps .hero .inner-content {
max-width: 1600px;
margin: 0 auto;
}
.portico-landing.apps .hero h1 {
font-size: 3em;
margin-bottom: 0px;
@ -1682,8 +1687,10 @@ nav ul li.active::after {
height: 100%;
}
.portico-landing.apps .hero .info .flex {
height: 100%;
.portico-landing.apps .hero .info .flex,
.portico-landing.apps .hero .image .flex {
height: 500px;
min-height: 0px;
}
.portico-landing.apps .hero .info button {
@ -3000,6 +3007,13 @@ nav ul li.active::after {
font-weight: 400;
}
.portico-landing.apps .hero .info .flex,
.portico-landing.apps .hero .image .flex {
height: 300px;
min-height: 0px;
}
.portico-landing.apps .other-apps {
padding: 50px 5px 120px 5px;
}

View File

@ -21,6 +21,7 @@
<div class="portico-landing apps">
<div class="hero">
<div id="waves"></div>
<div class="inner-content">
<div class="info">
<div class="flex">
<div class="cta">
@ -39,6 +40,7 @@
</div>
</div>
</div>
</div>
<div class="other-apps">
<h2>Apps for every platform.</h2>