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.

Thanks!

index.html

   <!DOCTYPE html>
    <html>
      <body ng-app="starter">
        <ion-pane>
          <ion-content has-bouncing="false"
                       start-y="55"
                       padding="true"
                       has-tabs="false"
                       has-header="false">
    
              <div class="row" id="logoContainer">
                  <h1>Logo</h1>
                  <div id="rays"></div>
              </div>
    
               <div id="menuList">
                   <div class="row">
                       <button class="button button-block button-balanced">Lets Play!</button>
                   </div>
                   <div class="row">
                       <button class="button button-block button-energized">Leaderboard</button>
                   </div>
                   <div class="row">
                       <button class="button button-block button-royal">Settings</button>
                   </div>
               </div>
          </ion-content>
        </ion-pane>
      </body>
    </html>

style.css

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

html, body {
    height:100%;
    margin:0;
}

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 https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries or search with google.