Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty.
I need these buttons to line up horizontally and adjust their width accordingly to prevent the text from becoming too small to read.
I can get it looking great on a Samsung or Nexus device, but when it comes to an iPhone, the third text element always jumps down to the next line instead of resizing.
Check out the mobile website:
EDIT (see screenshot below for the problem on an iPhone simulator):
https://i.stack.imgur.com/axoHI.png
This is how it usually appears on Android devices like a Nexus:
https://i.stack.imgur.com/A44zu.jpg
HTML:
<section id="footer">
<div id="footer">
<div id="full"><a href="http://www.teetimelawncare.com">Full Site</a></div>
<div id="foot"><a href="tel:18156096969">Call Us</a></div>
<div id="footer-right">Tee Time Lawn Care © </div>
</div>
</section>CSS:
#footer {
color: #fff;
font-size: 100%;
line-height: 45px;
font-weight: bold;
text-transform: uppercase;
background:#00CC00;
line-height: 18px;
text-align: center;
height: 30px;
}
#foot {
font-size: 100%;
background-color: purple;
display: inline-block;
padding-left: 10%;
padding-right: 10%;
height: 30px;
}
#full {
font-size: 100%;
float: left;
margin-left: 20px;
}
#footer-right {
font-size: 100%;
float: right;
margin-right: 20px;
}