Confession time... I'm facing a challenge with this task... I'm attempting to create a responsive page with 4 stacked divs.
Here are the guidelines for each div:
- The header div: The text should be at the bottom, serving as a slogan placed closer to the image.
- The image div: The image needs to be centered both vertically and horizontally within the div.
- The button div: The logon button should be positioned at the top of the div, close to the image.
- The footer div: This div must stay at the absolute bottom of the page regardless of screen size.
+-----------+
| |
| |
| Header |
+-----------+
| |
| Image |
| (75%x75%) |
| |
+-----------+
| Button |
| <a link |
| |
+-----------+
+-----------+
| Footer |
+-----------+
It seems to work fine on an iPad, but when I view it on devices with smaller screens like Android or iPhone 4/5, everything starts to fall apart...
This is what my HTML looks like:
<div id="welcomePage">
<div class="welcome">
<div class="welcome_header">
<h1 class="welcome">Welcome Slogan</h1>
</div>
<div class="welcome_image">
<img src="logo.svg">
</div>
<div class="welcome_button">
<input type="button" value="Get Started Now!">
<p>Already have an account? <a href="login.html">Login here</a></p>
</div>
<div class="welcome_footer">
<h3>© 2018 BlahBlah, Inc.</h3>
</div>
</div>
</div>
And here's the CSS I've used:
.welcome {color: #5e87b0; height:100%; }
.welcome_header {width: 100%; height: 25%; min-height: 25%; display: table-header; vertical-align: text-bottom;}
.welcome_header h1{font-size:6vh;}
.welcome_image {width: 100%; margin-left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }
.welcome_image img {border: 0; width: 75%; height: 75%;}
.welcome_button {width: 100%; height: 20%; position: absolute; clear: both; position:absolute; bottom:5%; left:0;}
.welcome_button h3 {transform: translateY(100%); bottom:0; text-align: center;}
.welcome_footer {width: 100%; height: 5%; position: fixed; clear: both; bottom: 10px; left:0;}
.welcome_footer h3{font-size:1vh;}
What could I be missing (other than some modern CSS skills 😉)?