A set of four responsive divs arranged vertically

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>&copy; 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 😉)?

Answer â„–1

Using flexbox makes it simple to stack elements

#landingPage {
  display: flex;
  flex-direction: column;
}

#landingPage section {
  flex: 1 1 auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vuetify's v-badge showcasing an exceptionally large number in style

Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge. Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-ta ...

Creating a dynamic drop-down box with editable text input using HTML5

I am looking to enhance text editing functionality by incorporating a drop down box and a custom scrollbar. This will allow the end user to input data directly or select from the dropdown options. The final value provided by the user should be saved. I w ...

Issues with the performance of the Responsive Image Slider

Having trouble with the carousel on my website. The Navigation Bar is working, but the image slider isn't showing up despite trying multiple approaches. Bootstrap is properly linked and I've read through the documentation for the Bootstrap Carous ...

In what ways can the current theme be utilized to optimize spacing?

Greetings everyone, I need assistance with adding margins above and below a Button element. Below is the relevant code snippet: const useStyles = makeStyles(() => ({ progress: { display: 'block', margin: 'auto', }, })); ...

What is the process for triggering an unordered list when I click on a table data cell within the Hospitals category?

Hi there! I need help with writing a JavaScript function for Hospitals in the code below. When I click on Hospitals, I want to display the values in the unordered list. Expected output: Hospitals--->onclick Bangalore| salem |Goa| Mangalore| Visakhapat ...

The `div` element automatically starts on a new line rather than expanding vertically

Check out my code here: http://jsfiddle.net/sfhs6ra1/ I'm facing an issue where I want the title of post #2 to be aligned next to the thumbnail image, taking up more vertical space instead of moving to a new line. Any suggestions on how I can achiev ...

A simple way to initiate an AJAX call once the page has completed loading is by using the `window.location.href` as the

I encountered an issue with my event listener setup function navBtn() { $('#navBtn').on('click', (event) => { window.location.href = 'someotherfile.html'; myAJAXrequest(); }) } The problem I'm facing is that ...

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...

Incomplete Website Encryption Alert

Currently, I am developing a website called "usborroe.com" and have just set up a GeoTrust Business ID SSL Certificate. However, despite my efforts to ensure full encryption on the site, an error message is indicating that it is not fully encrypted and t ...

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

Steps for incorporating monaco-editor into a website without utilizing nodejs and electron

Currently, I am working on building a basic web editor and came across Monaco-editor. I noticed someone using it with Electron, but I am interested in integrating it into plain JavaScript just like on their webpage (link). However, I am struggling to fin ...

Filtering stop words in Python through HTML parsing using Beautiful Soup

I have developed a program that extracts specific information from a website and stores it in a file. Currently, the program scans a webpage, identifies the correct HTML tag, and extracts the relevant content. Now, I aim to refine these "results." For ins ...

CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...

Styling animations in React with inline styles

Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...

Creating dynamic DIV elements in an AngularJS file using data retrieved from a Sql server

I need to dynamically add elements based on data retrieved from a MSSQL server in the specified area: <div id="ApplicationForm" class="tabcontent" style="display:none;"> <div class="tab_section"> ...

Clickable functionality disabled for form elements

I am encountering an issue with my system development task. The form elements appear to be unclickable, preventing any data entry in the fields. I have attempted moving the form tag above the first div in the code structure below as a troubleshooting step, ...

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

The Infinite scroll feature in Fuel UX is ineffective when a specific height is not defined for the

In my current project, I am utilizing Bootstrap and Fuel UX v3.4.0 with the goal of implementing Infinite scroll throughout my entire page. Unfortunately, I have encountered difficulties in achieving this implementation. By replicating the infinite scroll ...

Which SSO framework works best for integrating Facebook and Twitter logins?

I own a website and I'm looking for a way to let users leave reviews and rate products. I need an SSO system that allows them to sign in with their Facebook or Twitter accounts and ensures each user is uniquely identified so they can't rate produ ...