1

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?

Detilium
  • 2,868
  • 9
  • 30
  • 65
  • The problem is not the position. You need to make a media query to solve the landscape problem. Your only way to solve this is with position absolute... – Marcos Pérez Gude Aug 28 '15 at 11:58

3 Answers3

2

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

m4n0
  • 29,823
  • 27
  • 76
  • 89
Guy
  • 10,931
  • 5
  • 36
  • 47
  • As this is a PhoneJS, it's cross platform. Would this apply to Android and Windows Phone aswell? Isn't there a way of saying something like `if width > height` in css? – Detilium Aug 28 '15 at 12:01
  • I have not tested on windows phone as they have such a minor market share but I would think the `orientation: landscape` query would be triggered there too. For Android phones will need to adjust the `pixel-ratio`, `width` and `height` queries. See the article I linked to for a more in depth look. – Guy Aug 28 '15 at 12:08
  • It's supported in android aswell. Thank you for the answer. It works perfectly. I ended up designing them so that the the two buttons aren't underneath each other, but instead they're next to each other. Appreciate it. – Detilium Aug 28 '15 at 12:14
1

try to use the @media tags for css in this code.

rico
  • 11
  • 1
0

You can use table method like this in example. http://jsfiddle.net/2232cyrq/

make height:100% for body and html and main wrapper will stand as display: table and table-cell for bottom content

Ram kumar
  • 3,152
  • 6
  • 32
  • 49