HTML/CSS footer on mobile site doesn't work on IPhone safari How to fix?


Tags: html,iphone,css,mobile,footer

Problem :

I'm having trouble with a mobile website. The client wants these text based buttons/links on the bottom so I added them, but I'm a little rusty on using size percentages.

I need to make the look like this and stay on the same line, but stretch accordingly so the text isn't too small to read.
I can make it so it looks and works fine on a Samsung or Nexus, but using an IPhone always caused the third text element to move to the next line rather than shrink.

Mobile website: http://teetimelawn.com/m/html/index.html

EDIT (screnshot of a iphone simulator showing my problem):

http://i.imgur.com/R0RE0i5.png

How it typically looks on android phones liks a nexus: http://i.imgur.com/tkpLv4V.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 &copy; </div>  
    </div>
</section> <!-- #footer -->

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;
}


Solution :

There are quite a few issues with the HTML. First, you have two ids; only one should be present. Second, the divs for full, foot, footer-right should be a list item. There really isn't a reason that they need to be ids. if you want to do a special color for the middle, give it a class.

<ul class="footer">
  <li><a href="http://www.teetimelawncare.com">Full Site</a></li>
  <li class="purple"><a href="tel:18156096969">Call Us</a></li>
  <li><span>Tee Time Lawn Care ©</span></li>
</ul>

Then you can use text-justify to justify the lis. Take a look at this CodePen for more information on that: http://codepen.io/anon/pen/djoah


    CSS Howto..

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How to add style to the parent when radio button is selected

    How to show hide divs INSIDE divs easily?

    How to put background-color only a section of a select? CSS

    How to use CSS selector to find link by text

    how to pause css animation on hover using jquery

    How to normalize a button and an anchor with CSS?

    How can I make a CSS Wrapper adjust height automatically?

    How to dynamically scale images per height using pure CSS?

    CSS: How to get position and size relative to screen width?

    How do I apply properties to a previous sibling on hover?

    How to move the scrollbar down

    how is possible to change not nested elements attribute with css?

    How to make this double line shape with css?

    CSS Transition - how to make a text coming from the top side?

    How to move a span to a different position in a DIV

    How can I apply a font type to everything using css

    how can css reset :hover to default state?

    How to create Text Overlays in CSS?

    how to load the dynamically changed css file

    How can I add custom search box on page?

    Extend page content in height or show white background under content

    CSS & Button: How to override native CSS of html buttons element?

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    CSS - how to make content fit to the width/height of paragraph?

    How to put css class in to html:select element in jsp

    how to align the td on top/bottom with css

    How to align div first left then top in div parent?

    How to use CSS on an Html.ActionLink in C#

    How to Style CSS Checkboxes with Font Awesome