Theme on iPad WordPress

• SOLVED

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

Answers (2)

2013-01-21

daas answers:

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

<strong>Edit</strong>
Another solution is to add
<meta name="viewport" content="width=1040">
It changes viewport width to 1040 pixels

2013-01-22

plovs answers:

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