CODEWITHSUNDEEP
css
Zeddrix Fabian
Zeddrix Fabian

Reputation: 2566

How to position a group of elements at the bottom of mobile device's screen without using margin-top?

I would like to achieve this kind of look on my game settings:

enter image description here

The menu buttons are perfectly positioned at the bottom. But, I've achieved this using this stupid hack code of mine:

.settings-btns {
  margin-top: 10.7rem;
}

The problem is when I comment this line of code out, I get this:

enter image description here

It's the same device width and height. The buttons go up because there's no margin-top applied (of course). If I'm going to calculate the margin-top of these buttons on every device, man! that'll be a lot of work and it would not be very practical, I guess.

I suppose there is a better solution for this but I really don't know what it is. Has it got to do something with the background?

.background {
  background: url(../img/background.jpg);
  background-size: cover;
}

Or has it something to do with the container? (the container that covers the whole screen of the mobile device. I had this because I am using this container on the desktop media query.)

.container {
  border: 2px solid white;
  border-top: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}

I really don't know so please kindly help me.

Upvotes: 1

Views: 2596

Answers (2)

David Bendahan
David Bendahan

Reputation: 4482

The container can be adaptive to the device height using percentage or view port units:

.container {
  border: 2px solid white;
  border-top: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  /* using viewport */
  height: 100vh;
 }

You could also add the background image to the container itself but if you do it on another division just adapt the height to the container parent:

.background {
  background: url('https://www.gstatic.com/chat/hangouts/bg/bbafcf27dfe823a255e7fa549b5b6ba5-Matiash-01.jpg');
  background-size: cover;
  height: 100%;
}

And finally, for the settings buttons, I would use position fixed and the bottom property to decide how far from the end of the page they should be displayed:

.settings-btns {
  position: fixed;
  bottom: 30px;
}

I'm attaching a small example snippet:

.container {
  /* using viewport */
  height: 100vh;
}

.background {
  background: url('https://www.gstatic.com/chat/hangouts/bg/bbafcf27dfe823a255e7fa549b5b6ba5-Matiash-01.jpg');
  background-size: cover;
  height: 100%;
}

.settings-btns {
  position: fixed;
  bottom: 30px;
}

.settings-btns button {
  padding: 10px 25px;
}
<div class="container">
  <div class="background">
    <div class="settings-btns">
      <button>button 1</button>
      <button>button 2</button>
    </div>
  </div>
</div>

I hope it helped! 👍

Upvotes: 4

İbrahim Ak&#231;al
İbrahim Ak&#231;al

Reputation: 11

Just in case you have not tried yet, did you try giving the container height: 100% and position: relative, then align the buttons to the bottom by using css properties position: absolute and bottom: 0px ?

Upvotes: 1

Related Questions