Responsive Full-Width Section HTML5 CSS3

This week, I'll be showing you how to code a modern responsive page section with HTML5 and CSS3. This responsive full-page section will look awesome on any modern responsive website.


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.


Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog, she's making design & tech videos for her YouTube channel.


Leave a Reply

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