So I’m designing an app right now, and I need a little help. I can’t for the life of me figure out how to do this properly.
It’s got to do with the home page. It’s a standard page, with a header, and 6 icons in a 2 column 3 row format. It needs to be responsive across all devices. At the moment I’m using a CSS flexbox container combined with margin auto on the div that surrounds the rows. This works well for thw width. However I can’t for the life of me get the height to stay in proportion without setting a min height to 150px, which ruins the responsiveness for the iphone 5 and under, and also for when the app is in landscape mode. Although this isn’t as big of an issue because worst case we can lock the home screen to portrait only or something like that.
Here’s the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Expense Home</h1>
</ion-header-bar>
<ion-content class="">
<div class="eag-home-container-flex">
<div class="eag-home-container">
<div class ="row">
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-approved.png" ></button><p class="eag-home-label">Approved</p></div>
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-camera.png" ></button><p class="eag-home-label">Quick Capture</p></div>
</div>
<div class ="row">
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-pending.png" ></button><p class="eag-home-label">Pending</p></div>
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-receipt.png" ></button><p class="eag-home-label">Expenses</p></div>
</div>
<div class ="row">
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-rejected.png" ></button><p class="eag-home-label">Rejected</p></div>
<div class="col"><button class="button button-stable button-clear eag-home-button"><img src="img/icon-home-submit.png" ></button><p class="eag-home-label">Submit</p></div>
</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
I hope I formatted that right.
Here’s the CSS:
/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.
For example, you might change some of the default colors:
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
*/
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
/* CUSTOM TYLES */
.eag-home-button {
min-height: 150px;
}
.eag-home-button img {
width:70%;
}
.eag-home-icon {
width: 148px;
}
.eag-home-align{
text-align: center;
}
.eag-home-container-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.eag-home-container {
// width: 326px;
// height: 555px;
padding: 5px;
margin: auto;
transform: translateY(5%);
}
.eag-home-label {
padding: 0px;
margin: 0px;
text-align: center;
transform: translateY(-75%);
}
.eag-no-margin {
margin: 0 !important;
}
.eag-less-padding {
padding: 4px !important;
}
Each image/icon is 248x248 pixels as an image, but their size should scale down as the screen gets smaller obviously. I’ve got the scaling down (mostly) just managing the height without the icons cutting off or anything. I know I’m probably doing this all wrong, but this is my first time using Ionic and I’m struggling to wrap my head around it.
Basically this is what I want it to look like (let’s forget about the dividers and the backgrong color etc, I just want the 6 icons to look like this, while being responsive/fitting on all devices without having to scroll).
(yes, sorry I had to blank out the icons and text, company policy, but you get the jist right?)
Really hope someone can help we with this, you’ll be saving my ass.
Thanks!
