CSS3 continuous responsive elements

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×

Have you ever used the ubiquitous fullwidth widgets which come with many HTML templates? We all know Bootstrap and sliders made for it, but how many times you felt frustrated by the difficult on changing title sizes inside a jumbotron or cover image backgrounds that not act like you would like to, expecially on screen resizing?

How many jumbotrons or full-width sliders have you ever tried before finding the best one which correctly scales at every resolution? Personally I’ve tried many (Bootstrap and Accio in primis). And everytime I had to heavily customize a code that wasn’t thought for my purpose.

Now I abandoned third party code editing and wrote my own and ULTIMATE piece of HTML+CSS for having the best result. And I think you could to the same for your big head sections.

NO CSS screen queries needed!

CSS3 vw measure and auto heights are the only things you will use.

Let’s see how it is possible in this DEMO:

Continuous Responsive Element - Example

imagine a 100% width element on your page with a big image inside and a big title onto it like in the following example.

I want it to be ALWAYS on 100% page width, so my CSS will be:

/* CSS */
.jumbotron {
 width: 100%;
 position: relative;

Now the inside “background” image (that is not a real background, but an img HTML element with a low z-index):

/* CSS */
.jumbotron img {
  max-width: 100%;

.jumbotron_bck {
  width: 100%;
  height: auto;
  z-index: 1;

As you can see, the img element has auto height and this is the core of the trick: choose a well proportioned image as you like and it will size the element height.

And finally the titles:

/* CSS */
.bigtitle {
	position: absolute;
	bottom: 12%;
	left: 12%;

.bigtitle h1, .bigtitle h2 {
	font-size: 4vw;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	line-height: 1.04em;
	text-shadow: 1px 1px 1px #fff;
	text-align: right;
	color: #111;

.bigtitle h2 {
	font-size: 1.6vw;
	text-transform: none;
	text-shadow: 1px 1px 1px #fff;

Titles are included in an absolute element with font size screen-width based with vw CSS3 measure. That’s all.
Here is the simple HTML:

<!-- HTML -->
<div class="jumbotron">
	<img src="http://www.gianpa.com/wp-content/uploads/background_example.jpg" class="jumbotron_bck">
	<div class="bigtitle">
		<h1>THIS TITLE<br>
			At every screen size!

See the example for the complete code. I used it in a LIVE one page site for my work. You can see it here untill it will be dismissed for commercial reasons.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×