logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
Theme on iPad

Hi I have just built a site and the theme looks good in all browsers.

However on iPad the footer doesn't look like it should, it leaves a small space to the right.

Attached is a screenshot of the sites footer taken from an iPad 3, can anyone see what I can do to get the footer to sit 100% width with a bit of padding either side?

The url of the site is in the attached image, please have a look on iPad if you have one.

How it views on a browser is how I would like it to look on an iPad.

Thanks

This question has been answered.

attachment image asker uploaded image

Ross Gosling | 01/21/13 at 6:03pm Edit
Tutorial: How to assign prize money


(2) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/21/13
    6:44pm
    Max Matloka says:

    iPad's default viewport is 980px. Adding

    min-width:1040px;

    to
    #footertop

    and
    #footerouter

    forces iPad to display full-width div, but it also makes your page non responsive.
    You can create another css file and load it only on iOS devices.

    Here's the code

    
#footerouter{ min-width:1040px; }
    
#footertop{ min-width:1040px; }


    Check out the result

    Edit
    Another solution is to add
    <meta name="viewport" content="width=1040">

    It changes viewport width to 1040 pixels

    attachment image expert uploaded image

    Previous versions of this answer: 01/21/13 at 6:44pm

  • avatar
    Last edited:
    01/21/13
    7:32pm
    plovs says:

    The reason is that your #footertop and #footerouter are set to a width of 100%, while the inner-divs are 1040px and 1000px

    Solution:


    
#footertop {
    
border-top:3px solid #CCC;
    
width: 100%;
    
margin: 15px auto;
    
}
    

    
#footertopinnerouter {
    
width: 100%;
    
padding: 10px;
    
}
    

    
.footertext {
    
font-family:Lato, sans-serif;
    
width: 100%;
    
height:20px;
    
color:#FFF;
    
padding: 10px 10px;
    
text-align:right;
    
}
    

    
.footertext1 {
    
height:20px;
    
padding: 2px 20px 0 40px;
    
float:right;
    
}
    

    
.footertext2 {
    
height:20px;
    
padding:2px 0 0;
    
float:left;
    
}

This question has expired.



John Cotton, Ross Gosling, Arnav Joy voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.