Menu icon Foundation
Scrolling sections with 100vh

I want to create a Wordpress site with a hero section that fills the viewport, and is scrollable with sections below.

I have the following code which works on a test setup page using basic HTML/CSS.

I don't want to create parallax scrolling.

I want to create a Wordpress site with a hero section that fills the viewport, and is scrollable with sections below.

I have the following code which works on a test setup page using basic HTML/CSS. Here is the HTML

<body>

  <section id="hero">
    <h2>Title 1</h2>
  </section>

  <section id="section2">
    <h2>Title 2</h2>
  </section>

  <section id="section3">
    <h2>Title 3</h2>
  </section>

</body>
            

         

and here is the CSS.

*, html,body {
height:100%;
margin:0;
padding:0;
}

#hero {
min-height:100%;
position:relative;
background:#F00;
}

#section2 {
min-height:100%;
position:relative;
background:#00F
}

#section3 {
min-height:100%;
position:relative;
background:#0F0;
}

h2 {
    position: absolute;
    text-align: center;
}
            

         

This works fine and scrolls for me in my test setup page. However it doesn't work when I place it in a theme page template. I'm using Reverie. Instead of scrolling, the hero section stays fixed. Can anyone help me with this? I'm not interested in parallax scrolling as a solution.

wordpressreveriescrollingviewport

I want to create a Wordpress site with a hero section that fills the viewport, and is scrollable with sections below.

I have the following code which works on a test setup page using basic HTML/CSS.

I don't want to create parallax scrolling.

I want to create a Wordpress site with a hero section that fills the viewport, and is scrollable with sections below.

I have the following code which works on a test setup page using basic HTML/CSS. Here is the HTML

<body>

  <section id="hero">
    <h2>Title 1</h2>
  </section>

  <section id="section2">
    <h2>Title 2</h2>
  </section>

  <section id="section3">
    <h2>Title 3</h2>
  </section>

</body>
            

         

and here is the CSS.

*, html,body {
height:100%;
margin:0;
padding:0;
}

#hero {
min-height:100%;
position:relative;
background:#F00;
}

#section2 {
min-height:100%;
position:relative;
background:#00F
}

#section3 {
min-height:100%;
position:relative;
background:#0F0;
}

h2 {
    position: absolute;
    text-align: center;
}
            

         

This works fine and scrolls for me in my test setup page. However it doesn't work when I place it in a theme page template. I'm using Reverie. Instead of scrolling, the hero section stays fixed. Can anyone help me with this? I'm not interested in parallax scrolling as a solution.

Tracey G over 4 years ago

Apologies for duplicate text in the above post - some of my text disappeared while I was writing, only to turn up in the published post which I don't seem to be able to edit.

Rafi Benkual over 4 years ago

Tracey,

I put this in codepen if it's easier.
http://codepen.io/rafibomb/pen/XJyejm

We'd need to see a link to the page to see if the theme you are using is clashing with your CSS classes and overriding something. Can you share it?