Nested CSS Responsive Text on Wide image & 3 columns

Today we are back to CSS design and we are going to implement a simple page with a wide banner on which we apply a static text box. Below the banner will be placed 3 square boxes of same size.

On smaller devices, boxes will take the full screen width and text will be centered, images will be hidden so we have a clear view for the text and links.

For this tutorial we will use the following :

  • Bootstrap 4 (Download here) CSS library
  • 4 images (1 wide and 3 squares)
  • Your favorite HTML editor (from Notepad++ to Netbeans or Eclipse)

There is no need to load the Javascript library  of Bootstrap and its dependencies Tether and JQuery as we are only implementing CSS here, so forget about the following code :


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Result of CSS responsive text on Wide banner + 3 columns

At any time, you can watch the demo page and come back here to follow the description.

Text Box on Banner

Test the above url from several devices.

Code walk through

First off you need the Boostrap library and for this, we decided to go with the CDN version but you might also load the corresponding library right from your server or own CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 

Now to handle responsive layout correctly, we need to integrate the viewport meta tag as follow :


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

For more information about controling the page design using the viewport meta tag, see this url.

Besides Bootstrap default CSS code, we want to apply some custom modifications to our page, thus we create a new CSS file and load the content using this line :


<link rel="stylesheet" href="responsive-banner.css" type="text/css" />

Just put the above code between your Head tags.

We will create the file later, let’s now dig into the page with container and grid integration as detailed inside the Grid system on Boostrap.

The Grid layout

The page is using one main container in which a grid is set up with one column taking the entire row then 3 columns of same size inside the below row.

So we have 2 rows :

  • The above one – 1 column
  • The below row – 3 identical columns

Not a big deal then, see the code here :


<div class="container">

<div class="row no-gutters">
<div class="col">
<a href="#">
<img src="images/banner.jpg" alt="" />
<div class="content bg-white">
<h2>New promotional offers</h2>
<h3>sg sg sfg fggffg fgfgfg fg fgfg</h3>
<span class="btn btn-outline-primary">See more</span>
</div>
</a>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<a href="#">
<img src="images/box1.jpg" alt="" />
<div class="half-content">
<h3>Boostrap</h3>
<h4>An amazing library at your disposal.</h4>
<span class="btn btn-primary">Checkout</span>
</div>
</a>
</div>
<div class="col">
<a href="#">
<img src="images/box2.jpg" alt="" />
<div class="half-content">
<h3>CSS3</h3>
<h4>Along with HTML5, include CSS within your pages easily...</h4>
<span class="btn btn-primary">Learn more</span>
</div>
</a>
</div>
<div class="col">
<a href="#">
<img src="images/box3.jpg" alt="" />
<div class="half-content">
<h3>Secure your code</h3>
<h4>Respect standards and you will be all right !</h4>
<span class="btn btn-primary">Follow us</span>
</div>
</a>
</div>
</div>

</div>

If you read the lines above, you will notice the no-gutters class next to row.

As its name implies, that will remove spaces’ margins between rows and columns, depending on the layout you need, you might not want to use the class.

The TextBox

For the boxes to appear on our images, we implement 2 classes : content and half-content, they are actually similar so we just need to detail a bit the content one.

When you add code line by line, the page will by default add the lines starting from the above down the last one, obvious isn’t it ? If you are beginnner and have never heard about CSS and its position features, then google the keyword and you will get plenty of results. For the sake of this tutorial, I use the position:absolute property to be able to add the textbox according to its parent position.

div.content {
    position : absolute;
    top : 5%;
    right : 5%;
}

The top and right properties are here to position the content within the box. The rest of the code does not need any comment, refer to your CSS learnings.

However  for different media sizes, we will apply customization to better layout the content and for this we use these media queries :

 


@media (min-width: 0px) { ...}

@media (min-width: 768px) { ... }

You can add as many as you need and define different CSS properties in them to match the desired result according to screen sizes of the devices you use.

Basically here whenever a screen is below 768px then the images will be hidden and the textboxes centered within the column. Check out the code :


@media (min-width: 0px) {

.container div.row img {
display : none;
}

.content {

position : relative;
top : auto;
right : auto;
width : 100%;

}

 

I guess you have got the point and I don’t need to go any further in details so I will just leave you now. For the full code source, launch the demo page and hit the developer tool button of your prefered browser.

That was a basic tutorial and I hope it has been useful to you guys, if you have anything in your mind, put a comment here and I will be pleased to discuss with you.

If you need more code examples of using CSS, then browse the CSS tutorials.

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: