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)
This is landscape (button misplaced)
How can one accomplish such task without using the position: absolute
css attribute?
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 */
}