How to resize content to stay on screen

Hi All!

I am new here and I guess this isn’t really Ionic specific but I was wondering how can I keep all my content on the screen for different size devices. I have a main menu screen. It has a Logo and a couple of buttons. When I open it on iPhone 5 it looks great but when I open it on iPhone 4 it is put into a scroll view because the last button doesn’t fit into the viewport. How can I have the buttons automatically resize so they stay on the screen. I’ve included my example below.



   <!DOCTYPE html>
      <body ng-app="starter">
          <ion-content has-bouncing="false"
              <div class="row" id="logoContainer">
                  <div id="rays"></div>
               <div id="menuList">
                   <div class="row">
                       <button class="button button-block button-balanced">Lets Play!</button>
                   <div class="row">
                       <button class="button button-block button-energized">Leaderboard</button>
                   <div class="row">
                       <button class="button button-block button-royal">Settings</button>


.scroll-content {
  background-color: #0084B4;

html, body {

h1 {
    position: relative;
    text-align: center;
    color: white;
    font-size: 500%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 0;
    z-index: 2;

#logoContainer {
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;

#menuList {
    position: relative;
    display: block;
    top: auto;
    height: auto;
    bottom: 0;
    margin: auto 0 0 0;

/* keyframes for animation;  simple 0 to 360 */
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }

@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

#rays {
  background: url(../img/rays.png) center center no-repeat;
  position: absolute;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;

  -webkit-animation: spin 40000ms infinite linear;
  -moz-animation: spin 40000ms infinite linear;
  /* microsoft ie */
  animation-name: spin;
  animation-duration: 40000ms; /* 40 seconds */
  animation-iteration-count: infinite;
  animation-timing-function: linear;

Bump. Any suggestions or guides?

I have got same problem like this too.

You can use media queries, but as you wrote, this isn’t ionic specific. For example you can read or search with google.