body { margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */ } .header-image { background: url(http://placehold.it/200x300) repeat;/* Use a tiling background image or a full width image - if you're using full width you will need to change no-repeat center center cover */ background-position: top; height: auto; display: block; width: 100%; text-align: center; } .headline { padding: 120px 0; } .headline > .container > h1 { font-size: 130px; background: #ffffff; background: rgba(255, 255, 255, 0.9); } .headline > .container > h2 { font-size: 77px; background: #ffffff; background: rgba(255, 255, 255, 0.9); } .featurette-divider { margin: 80px 0; } .featurette { overflow: hidden; } .featurette-image.pull-left { margin-right: 40px; } .featurette-image.pull-right { margin-left: 40px; } .featurette-heading { font-size: 50px; } footer { margin: 50px 0; } /* RESPONSIVE CSS */ @media (max-width: 1200px) { .headline > .container > h1 {font-size: 140px;} .headline > .container > h2 {font-size: 63px;} .featurette-divider {margin: 50px 0;} .featurette-image.pull-left {margin-right: 20px;} .featurette-image.pull-right {margin-left: 20px;} .featurette-heading {font-size: 35px;} } @media (max-width: 991px) { .headline > .container > h1 {font-size: 105px;} .headline > .container > h2 {font-size: 50px;} .featurette-divider {margin: 40px 0;} .featurette-image {max-width: 50%;} .featurette-image.pull-left {margin-right: 10px;} .featurette-image.pull-right {margin-left: 10px;} .featurette-heading {font-size: 30px;} } @media (max-width: 768px) { .container {margin: 0 15px;} .featurette-divider {margin: 40px 0;} .featurette-heading {font-size: 25px;} } @media (max-width: 668px) { .headline > .container > h1 {font-size: 70px;} .headline > .container > h2 {font-size: 32px;} .featurette-divider {margin: 30px 0;} } @media (max-width: 640px) { .headline {padding: 75px 0 25px 0;} .headline > .container > h1 {font-size: 60px;} .headline > .container > h2 {font-size: 30px;} } @media (max-width: 375px) { .featurette-divider {margin: 10px 0;} .featurette-image {max-width: 100%;} .featurette-image.pull-left {margin-right: 0; margin-bottom: 10px;} .featurette-image.pull-right {margin-left: 0; margin-bottom: 10px;} }