This is a very basic example of what you can achieve with pure CSS `table` and `table-cell` display property values. You can divide your home page or landing page into many sections, each one takes up the full available view-port height (user screen size), and the user can scroll nicely from each section to another.

You can start from it, add more animations or a JavaScript scroll to it, etc.

Live Preview (CodePen)

See the Pen full-screen mobile-friendly sections by Samuel Elh (@samiel) on CodePen.

The Source

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>samelh.com/blog</title>
  <style type="text/css">
  html, body { height: 100%; margin: 0px; padding: 0px; font-family: 'Open Sans', Nunito, Arial, Helvetica, sans-serif; }
  section { height: 100%; width: 100%; display: table; text-align: center; color: #fff; }
  section.color-1 { background: #1da7da; }
  section.color-2 { background: rebeccapurple; background: purple; }
  section.color-3 { background: green; }
  section.color-4 { background: black; }
  section .inside { display: table-cell; vertical-align: middle; padding: 3px 12px; }
  section .inside h1 { font-size: 2em; margin: 0.67em 0; }
  section .inside p { font-size: 17px; color: #ddd; margin-bottom: 0; }
  </style>
</head>
<body>

  <section class="color-1">
    <div class="inside">
      <h1>Hello there!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="color-2">
    <div class="inside">
      <h1>Well, hello again.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="color-3">
    <div class="inside">
      <h1>Still you?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="color-4">
    <div class="inside">
      <h1>Well, hello again.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
</body>
</html>
Digital Ocean

Cheap Cloud SSD Hosting

Get a VPS now starting at $5/m, fast and perfect for WordPress and PHP applications

Sign Up with $10 Credit