Adding a Full Width Sectional to Your Website

Learn to highlight specific content on your website reinforced by striking visuals that captures your audience's attention

Adding a Full Width Sectional to Your Website

Contemporary web design often blends fixed-width containers with full-width sectionals. By utilizing a full-width sectional, you can highlight specific content pieces, reinforced by an appropriate image that captures your audience's attention. Determining which content to place in a fixed-width container or a full-width sectional is mainly dependent on two things - the importance of the content and messaging as well as its supporting visual medium (graphic, video, icons, slider). Determining what content should be placed where should feel intuitive to you, simply align your content and messaging placement with its level of importance to your organizational goals.

Below is the HTML, CSS, and JavaScript required.

Step 1 - sectional.html

Copy and paste the following code into sectional.html

Step 2 - sectional.css

Download the CSS below and include it in your web page


Step 3 - Add the following includes to your web page

In this tutorial we showed you how to add a full width sectional to your website. Now you can customize the design and make it your own!


Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.