Search code examples
csscss-positionphonejs

CSS - Align div in bottom of screen without using position: absolute


I'm designing a PhoneJS app, and I need to have a button placed in the bottom of the screen, but without using position: absolute.

Why don't I just use absolute?

As this is a PhoneJS application, this causes problems when flipping the phone to landscape (refer below)

This is portrait (button placed correctly)

enter image description here

This is landscape (button misplaced)

enter image description here

How can one accomplish such task without using the position: absolute css attribute?


Solution

  • You will still have the issue of two buttons and no space regardless of position: absolute.

    I would suggest using a media query to target landscape and change the styles.

    /* iPhone Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
    
      /* Styles go here */
    
    }
    

    Media queries on CSS Tricks