# Layout run off for different screen size

**URL:** <https://forum.ionicframework.com/t/layout-run-off-for-different-screen-size/100968>\
**Category:** ionic-v1\
**Created:** [August 5, 2017, 1:46pm UTC](https://forum.ionicframework.com/t/layout-run-off-for-different-screen-size/100968 "2017-08-05T13:46:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [August 5, 2017, 1:46pm UTC](https://forum.ionicframework.com/t/layout-run-off-for-different-screen-size/100968/1 "2017-08-05T13:46:08Z")

</div>

My app with this button created will run off with different sizes of screen.

For a 7 inch screen, the icon and words tend to skew to top.  
[![](https://i.snag.gy/RlDdP5.jpg) ](https://i.snag.gy/RlDdP5.jpg)

for 5 inch, the icon and words tend to skew to bottom  
[![](https://i.snag.gy/gkQmOy.jpg) ](https://i.snag.gy/gkQmOy.jpg)

How to make it at the icon and words centered for all the screen sizes?  
If the screen size is larger, the icon/words looks larger while if the screen smaller the words and icons to be smaller. The reason is the 6 square that contains icon/words will be depends on the screen size.

Html

```
  <div id="row2" class="row">
    <a class="col" href="#/app/personalStocks">
      <div class="colwrapper">
        <i class="material-icons">&#xE06D;</i>
        <span>Watchlist</span>
      </div>
    </a>
    <a class="col" href="#/app/stockSearch">
      <div class="colwrapper">
        <i class="material-icons">&#xE8B6;</i>
        <span>Search</span>
      </div>
    <a class="col" href="#/app/screenerSearch">
      <div class="colwrapper">
        <i class="ion-stats-bars"></i>
        <span>Top Movers</span>
      </div>
    </a>
  </div>

  <div id="row3" class="row">
    <a class="col" href="#/app/watchList">
      <div class="colwrapper">
        <i class="icon ion-medkit"></i>
        <span>Portfolio Diagnosis</span>
      </div>
    </a>
    <a class="col" href="#/app/screenerSearch">
      <div class="colwrapper">
        <i class="material-icons">&#xE152;</i>
        <span>Screener</span>
      </div>
    </a>
    <a class="col" href="#/app/stockScreener">
      <div class="colwrapper">
        <i class="material-icons">&#xE417;</i>
        <span>Snapshot</span>
      </div>
    </a>
  </div>

```

css

```auto
#row2 .col .colwrapper, #row3 .col .colwrapper{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 55%;
  width: auto;
  text-align: center;
  margin-top: 25px;
}
#row2 .col .colwrapper i, #row3 .col .colwrapper i{
  font-size: 30px;
}
#row2 .col img, #row3 .col img{
  position: relative;
  display: block;
  height: 75%;
  width: auto;
  left: 0;
  right: 0;
  margin: auto;
}
#row2 .col span, #row3 .col span{
  display: block;
}

```

---

<div class="post-metadata">

**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\
**Post date:** [August 6, 2017, 7:56am UTC](https://forum.ionicframework.com/t/layout-run-off-for-different-screen-size/100968/2 "2017-08-06T07:56:02Z")

</div>

I am adding flexbox but did not take effect:

```auto
#row2 .col .colwrapper i, #row3 .col .colwrapper i{
  font-size: 30px;
  align-content: center;
  align-items: center;
  align-self: center;
}

```

Please advice