Make jumbotron mo responsive

This commit is contained in:
Mark Otto 2013-01-16 15:07:57 -08:00
parent cf693b5632
commit 1288304e91
2 changed files with 27 additions and 14 deletions

View File

@ -4589,9 +4589,9 @@ a.badge:hover {
}
.jumbotron {
padding: 60px;
padding: 30px;
margin-bottom: 30px;
font-size: 18px;
font-size: 21px;
font-weight: 200;
line-height: 30px;
color: inherit;
@ -4600,15 +4600,21 @@ a.badge:hover {
}
.jumbotron h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
color: inherit;
}
.jumbotron li {
line-height: 30px;
.jumbotron p {
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding: 50px 60px;
}
.jumbotron h1 {
font-size: 60px;
}
}
.clearfix:before,

View File

@ -4,22 +4,29 @@
.jumbotron {
padding: 60px;
padding: 30px;
margin-bottom: 30px;
font-size: 18px;
font-size: 21px;
font-weight: 200;
line-height: @line-height-base * 1.5;
color: @jumbotron-lead-color;
background-color: @jumbotron-background;
border-radius: 6px;
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: @jumbotron-heading-color;
letter-spacing: -1px;
}
li {
line-height: @line-height-base * 1.5; // Reset since we specify in type.less
p {
line-height: 1.4;
}
}
@media screen and (min-width: 768px) {
.jumbotron {
padding: 50px 60px;
h1 {
font-size: 60px;
}
}
}