Creating Full Width Sections

May 6, 2019 12:32 am Published by Leave your thoughts

In this tutorial, you will learn how to create sections on a website than span the width of the screen. The cool thing about it is the margins are maintained. It is recommended you have solid knowledge of HTML and CSS before continuing. We Here is an example of what we should see by the end of this tutorial:

Without further ado, let’s jump into the code! Find a home for this tutorial, and create a folder in that location. This folder will serve as our project’s directory. In that folder, create two folders: css and images. In addition, create a file named index.html and keep that in the project directory. In the css folder, add a file called styles.css. You can also find four images on the internet and put them in the images folder. Once you have done that, open index.html with a text editor or code editor of your choice.

In the index.html file, we will be defining the basis for our web page such as setting the character set, setting the language, resize the viewport for mobile devices, etc. Add the following to your index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta lang="en-us">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Full Width Sections Example</title>

    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body>

  </body>
</html>

The next step we’ll do is to add the site wrapper div, which we can add CSS to if we want to affect the entire page with properties. Let’s add this <div> element to the <body> element:

<div class="site-wrapper">

</div>

Inside our site wrapper, we will need to add another <div> which will contain our sections:

<div class="site-sections">

</div>

For the purposes of this tutorial, we will only be adding two background colors for our sections. However, you can add as many as you wish. Generally, it’s a good idea to have not more than two or three colors in the layout of your website. In the site sections <div>, add the following code to create a section:

<div class="wrapper-green">
  <section>
    <div class="section-padding">
      <div class="section-image-wrapper">
        <img class="section-image" src="images/nathan-dumlao-1555015-unsplash.jpg" alt="Service 2">
      </div>
      <div class="section-text-padding">
        <h2>Service 2</h2>
        <p>Ut euismod fermentum neque id vulputate. Curabitur pharetra erat ullamcorper justo malesuada efficitur. Mauris sit amet commodo sem. Praesent id libero at nibh dignissim vehicula. Sed posuere malesuada dui, id ornare dolor tincidunt a. Nullam nisi dolor, varius vel blandit sit amet, bibendum ac sem. </p>
      </div>
    </div>
  </section>
</div>

If we want the image in the section to be left aligned, we’ll add the <div> containing the image before the <div> element with the text. We can swap the positions of these two divs if we want the image to be right aligned.

Let’s try it! Add three more sections like above, alternate the wrapper class between “wrapper-green” and “wrapper-blue”, and alternate the positions of the image and text divs. Once that’s done, let’s head over to our styles.css file and start adding our style rules.

The first thing we want to do in our styles.css file is to add a style rule to make the appearance of our site a bit more consistent across browsers. Let’s start our file with the following code:

html, body {
  margin: 0;
  padding: 0;
}

Next, we’ll add style rule for the site wrapper. We will be using the font-family property to set the font of all elements on the page.

.site-wrapper {
  font-family: 'Poppins', sans-serif;
}

Note, you may notice the landing page image on the top of the page in the example video. I won’t be covering how to create the full screen landing page in this tutorial, but you can find my tutorial on that here.

The next part is to add the style rules for the blue and green wrapper divs. Let’s add them!

.wrapper-blue {
  background: #004cff;
}

.wrapper-green {
  background: #078a1f;
}

This next part is where it gets interesting. The next rule is where we essentially set the “margin” on both sides of the section. Let’s add another little code block:

section {
  margin: 0 auto;
  max-width: 960px;
}

The next two style rules will affect the h2 and p elements within any section padding <div>. We will just want to set the color of both of these elements to white, since our backgrounds are dark enough.

.section-padding h2 {
  color: white;
}

.section-padding p {
  color: white;
}

We will also want to add a style rule for <div> elements with the class section-padding.

The next class for which we will be adding a style rule, section-padding, will utilize CSS flexbox! We want an image and a summary displayed next to each other for each section. CSS flexbox allows us to fit the two <div> elements next to each other.

.section-padding {
  display: flex;
  flex-direction: row;
  padding: 32px;
  min-height: 380px;
}

For each <div> element within the section padding div (the div containing the image, and the div containing a summary), we want the width of it to be 40% of the service padding div. Let’s add this rule:

.section-padding div {
  width: 40%;
}

We will also want to add a bit of padding for the section summary text:

.section-text-padding {
  padding: 64px;
}

By default, the image for each section will be stuck near the top of that section. It will look much nicer to center align the image vertically. To accomplish this, we will enable flexbox on the section-image-wrapper div. This time, instead of using flex-direction, we will be using align-items.

.section-image-wrapper {
  display: flex;
  align-items: center;
}

The image for each section should take up 100% of the div that it’s in (which is 40% of the section padding wrapper <div>)

.section-image {
  width: 100%;
  height: auto;
}

That’s a wrap to get the sections up and running on desktop platforms. However, mobile devices are an enormous percentage of devices accessing the internet. Because of this, let’s make this design mobile-friendly via CSS media queries! In the code below, any screen that is less than 640 pixels in width will cause the enclosed style rules to override the style rules defined above. Add the following code to add our media query:

@media (max-width: 640px) {
  .section-padding {
    flex-direction: column;
  }

  .section-padding div {
    width: 100%;
  }

  .section-text-padding {
    padding: 0;
  }
}

With that, this tutorial is complete! If we take a look, we should see a similar result to the example video in the beginning of this tutorial. If you have any questions, comments, or other feedback, I’d like to hear it! You can email me, or tweet me @jaredyork_.

You can find the source code for this tutorial on GitHub.

If you would like to receive news on our future tutorials and courses, be sure to fill out the form.

Tags: , ,

Categorised in: ,

This post was written by Jared York

Leave a Reply

Your email address will not be published. Required fields are marked *