I am currently working on creating a website that is similar to another one. The original website uses JavaScript to adjust the padding on the first section in order to keep it within the viewport of the window. I have successfully implemented this feature, but now I am facing an issue with getting the button to move like theirs does when the window size changes.
Check out the video below. Essentially, when I decrease the height (up to a certain point), the button should move upwards. However, on my website, it doesn't move as expected because I haven't been able to figure out how they achieved this effect. The video showcases their CSS and HTML code, and it appears that no values are altered by JavaScript to make the button move. Despite this, the button's position changes while maintaining a padding value of 96 for the element above.
Edit: My current code looks like this:
<body>
<div class="container">
<section id="header" class="arrows" style="padding:280px 0px">
<header>
<h1>Mobile Paint Solutions</h1>
<p>Since 1980</p>
</header>
<footer>
<a onClick="test()" href="" class="button white">About</a>
</footer>
</section>
<section id="banner" class="arrows">
<header>
<div>
<h1>About Us</h1>
<p>We are a proud company and have been providing a superb service for many years. You may read some of our reviews or submit your own below! </p>
</div>
</header>
<footer>
<a href="#banner" class="button white">About</a>
</footer>
</section>
</div>
</body>CSS for the #header:
body {
text-align:center;
font-family:'Source Sans Pro', sans-serif;
letter-spacing: 1px;
background-image:url(images/bg.jpg);
padding:0px;
margin:0px;
}
header { margin-bottom: 1em; }
* {
margin:0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Header and Title Styles */
#header {
display:inline-block;
text-transform:uppercase;
color:#FFF;
cursor:default;
text-align: center;
}
#header header p:before {
content: '';
display: block;
border-top: solid 1px rgba(255, 255, 255, 0.5);
margin: 4px 0 0.8em 0;
}
#header header p {
border-top:solid 1px rgba(255, 255, 255, 0.5);
letter-spacing:3px;
text-transform:uppercase;
font-size:1em;
margin-top:1em;
}
#header h1 {
font-size:2.5em;
font-weight:bold;
letter-spacing:3px;
}
Here is a link to their website so you can see the functionality in action.