Skip to content

Instantly share code, notes, and snippets.

@marisqaporter
Created March 7, 2018 20:19
Show Gist options
  • Save marisqaporter/3886f391f6d2c1c9f0ab90f46dcbf7b0 to your computer and use it in GitHub Desktop.
Save marisqaporter/3886f391f6d2c1c9f0ab90f46dcbf7b0 to your computer and use it in GitHub Desktop.
subhero code for full width
/*-------------------------------------------
Panel Hero Sub Page (allowing for hero)
-------------------------------------------*/
section#sub-hero {
width: 100%;
height: 100%;
max-height: 640px;
background-position: top center;
background-size: cover;
border-bottom: 4px solid #393530;
overflow: hidden;
}
section#sub-hero-empty {
display:none;
}
div#sub-hero-inner {
width: 1170px;
background-position: top center;
background-size: cover;
padding-top: 33.3333%;
position: relative;
margin: 0 auto;
}
@media (max-width: 1200px){
div#sub-hero-inner {
width: 970px;
}
}
@media (max-width: 990px){
div#sub-hero-inner {
width: 750px;
}
}
@media (max-width: 800px){
div#sub-hero-inner {
height: 330px;
}
}
div#sub-hero-inner .container {
margin: 0 auto;
padding:0;
width: 1170px;
bottom: 0;
position: absolute;
}
.sub-hero h1 {
margin: 0;
padding: 0;
font-family: "Crimson Text", Georgia, serif;
color: #f4f2e8;
font-size: 132px;
font-weight: 600;
text-align: left;
text-transform: capitalize;
line-height: 1.4;
border: none;
}
@media (max-width: 1200px){
.sub-hero h1 {
font-size: 112px;
}
}
@media (max-width: 990px){
.sub-hero h1 {
font-size: 92px;
}
}
@media (max-width: 800px){
.sub-hero h1 {
margin: 0 0 0 10px;
font-size: 72px;
}
}
@media (max-width: 990px){
.not-front #main .row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.col-lg-9.col-md-9.col-sm-12.col-xs-12.with-hero {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
aside#sidebar-first {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment