My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout:
<body>
<div class="app">
<div class="headerOne">
<h1></h1>
</div>
<div class="menu">
<ul>
<li>
<a class="shop">Shop</a>
</li>
<li>
<a class="login">Login</a>
</li>
<li>
<a class="account">New Account</a>
</li>
</ul>
</div>
</div>
</body>
I'm looking to make these buttons fill the page while adjusting for different phone screens. How can I achieve this? Here's my CSS code:
<!-- language:lang-css -->
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
}
.app {
height:100%;
width:100%;
text-align:center;
}
@media screen and (min-aspect-ratio: 1/1) {
.app {
background-position:left center;
width:100%;
height:100%;
}
}
.headerOne{
border: 1px solid black;
background: -webkit-linear-gradient(top, #000000, #333333);
width:100%;
height:30px;
border-radius: 2px;
font-size:24px;
font-weight:normal;
text-align:center;
color:white;
margin-bottom:30px;
}
.menu li{
margin-top:30px;
min-height:30px;
min-width:60px;
}
.shop{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
}
.login{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}
.account{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
In addition, I have included a standard format CSS file in case it could be affecting the layout:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}