Full Screen Width and Height Sections Using CSS

Full Screen Width and Height Sections Using CSS
Code Snippet:Full screen sections with CSS
Author: Andrew Ckor
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 455
License: MIT
Edit Code online: View on CodePen
Read More

This CSS code snippet helps you to create full screen width and height sections on a webpage. It sets each section’s height to 100% of the viewport. The “intro” section is 90% in height, emphasizing its distinction. Sections adapt responsively to browser resizing.

It utilizes CSS properties like `vh` for height. The code enhances visual appeal without JavaScript’s involvement. Moreover, you can customize the sections using additional CSS according to your website’s layout.

How to Create Full-Screen Width and Height Sections Using CSS

1. First of all, create the HTML structure of your sections within <section> tags. Each section will represent a full-screen segment of your page content. The content within each section is contained in a <div> with the class “content.” Adjust the content within the <h1> and <p> tags to suit your needs.

<section class="intro">  
  <div class="content">
    <h1>You can create full screen sections without javascript.</h1>
    <p>The height is set to 90vh, that means 90% height.</p>
 </div>
</section>

<section>  
  <div class="content">
    <h1>Resize your browser and see how they adapt.</h1>
 </div>
</section>

<section>  
  <div class="content">
    <h1>It's amazing and fast.</h1>
 </div>
</section>

<section>  
  <div class="content">
    <h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
 </div>
</section>

<footer>
  Made by <a href="https://www.twitter.com/ckor">@ckor</a>
</footer>

2. The CSS code is where the magic happens. Key properties like height: 100vh; ensure each section takes up the full height of the viewport. The “intro” section, with the class “intro,” has a specified height of 90% (height: 90vh;). The background colors and styling details are easily customizable.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 500;
  font-family: "HelveticaNeue";
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
}
section:nth-of-type(2n) {
  background-color: #FE4B74;
}

.intro {
  height: 90vh;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

h1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

p {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;
}

a {
  font-weight: 700;
  color: #373B44;
  position: relative;
}
a:hover {
  opacity: 0.8;
}
a:active {
  top: 1px;
}

footer {
  padding: 1% 5%;
  text-align: center;
  background-color: #373B44;
  color: white;
}
footer a {
  color: #FE4B74;
  font-weight: 500;
  text-decoration: none;
}

The CSS for content (h1, p, and a tags) ensures a clean and visually appealing display. Adjust font sizes, colors, and styles to match your website’s theme.

That’s all! hopefully, you have successfully created Full-Screen sections on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X