how to make wordpress site ipad friendly

when this site is viewed on an ipad, the alignment is all out of whack (see attached screenshot). what's the best way to make everything align appropriately on the ipad? please advise. thanks in advance!  


 

 

Is the theme that you are using adjusted for the iPad's resolution which is 1024 x 768 px?

 

i think the problem was that the theme used a lot of 100% widths. i changed them to fixed numbers and it seems to be a lot better. i used the www.ipadpeek.com tool to preview it in an ipad. i dont have one myself. do you think i still need to consider the resolution???

 

I don't know. Maybe try asking for help here: http://forums.digitalpoint.com/forumdisplay.php?f=17

 

This as a good resource to know, even if you do not go with it, http://wordpress.org/extend/plugins/wptouch/

 

That should do the trick. 

 

looks like wptouch is for the iphone. i think i just have some float issues going on here that if i cleaned up, would render it correctly...

but i cant figure out what they are. any thoughts? 

 

i’m making some progress now. you’ll notice that even without an ipad, if you shrink the width of your browser screen, the site will become “out of whack” just like it does in the ipad.

apparently the site shrinks because of the ‘responsive’ style section of the twenty eleven theme’s style.css file. there’s elements at the bottom of the style sheet that look like this

@media (max-width: 800px) { … 

Code (markup):

so i tinkered enough with them to get the content portion of the site to align correctly. but i’m still having a lot of trouble figuring out which @media element i need to change to get the footer widgets to align horizontally across the page. any idea???