Responsive Full-Width Section HTML5 CSS3


To HTML for the responsive full-width section is simple. First, we’ll use the section tag to contain all the elements that will be in the section. Each tag has a unique class name so that the styling is specific to the section and not the whole web page.


The CSS for the responsive full-width section is written in the order in which the appear. The <a> tag is written first since this is a global style. The most important CSS style is the .xop-container element. The declaration for this element is what makes the section responsive. By using max-width: 85% and width: 960px together, the sections container (which holds all the text elements) will go no wider than 960px so that it’s contained nicely in the section. When the browser goes below 960px, it will adjust nicely to the width of the browser.

a {
text-decoration: none;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;

#xop-about {
padding: 60px 0;
background: #3498DB;
text-align: center;
color: #fff;
font-family: ‘Source Sans Pro’, sans-serif;
font-size: 1.6rem;
line-height: 1.3;
text-rendering: optimizeLegibility;

.xop-container {
max-width: 85%;
width: 960px;
margin: 0 auto;

.xop-heading {
margin: 0;
font-size: 2.6rem;
font-weight: 700;
padding-bottom: 2rem;
letter-spacing: 0.08rem;

.xop-text {
margin-bottom: 20px;
font-size: 2rem;
line-height: 1.5;
font-weight: 400;
letter-spacing: 0.08rem;

.xop-more {
display: block;
margin: 2rem 0 0;
color: #19669A;
font-weight: 700;
font-size: 2rem;

.xop-more:hover {
color: #fff;

.xop-more::after {
content: “\f061”;
font-family: FontAwesome;
padding-left: 10px;

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.