WordPress Troubleshooting and Support
Public Group active 10 months, 1 week ago agoWordPress support from our community
how to make wordpress site ipad friendly
- This topic has 22 replies, 4 voices, and was last updated 11 years ago by
Jay.
-
AuthorPosts
-
August 5, 2011 at 12:34 am #1226
Jay
Participantwhen 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!
August 5, 2011 at 2:14 am #2020Joly MacFie
ParticipantUm, attachment not working..
August 5, 2011 at 11:43 am #2021Steve
Keymasteror just use a different theme for the iPad: http://wordpress.org/extend/plugins/onswipe/
August 5, 2011 at 12:26 pm #2022Jay
Participanti was using twentyeleven theme which had a lot of widths that were 100%. i made them fixed numbers and that seems to have helped a lot.
fyi: you can used http://www.iPadPeek.com to preview a website on an ipad.
August 5, 2011 at 11:57 pm #2023Jay
Participantit seems like that onswipe program is really just for creating the swipe feature. but i’m having a lot of alignment issues.
apparently i havent made any progress because what my client is seeing on their ipad is a lot different than the http://www.ipadpeek.com. although when i shrink the ipad peek thing down two sizes it seems to show what my client is seeing on their ipad. i think i have a float issue but cant figure it out.
any advice???
August 8, 2011 at 12:30 am #2024Steve
KeymasterFirebug + User Agent switcher:
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/You will also need additional user agents:
http://techpatterns.com/forums/about304.htmlAugust 8, 2011 at 3:03 pm #2025Jay
Participanti’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) {
…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???
August 8, 2011 at 3:44 pm #2026Margarete Koenen
ParticipantAll depends on at what width you want the footer widgets to align horizontally and when you want them to jump to vertical alignment. You could set up the default to align horizontally. Then use @media (max-width:450px) -about the width of a mobile screen- to align them vertically. I have not looked at the particular css, but most likely all you have to do is stop floating the widgets. If you also want to align the widgets horizontally on a vertical ipad screen, you should use @media (max-width: 650px) and do the some here as you did for the mobile screen size.
August 8, 2011 at 4:52 pm #2027Jay
Participantwell i really want the landscape ipad view to make the site look exactly like it does in a normal web browser. so i want all the footer widgets to line up horizontally. just not sure what css element i would add to what element and how to include the @media into the structure of this new css elements.
please advise.
August 8, 2011 at 5:28 pm #2028Margarete Koenen
ParticipantThe screen resolution of an ipad is 768×1024. The @media commands are:
@media (max-width: 800px)
@media (max-width: 650px)
@media (max-width: 450px)
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
The footer widgets are the class .widget-area. They are floating into horizontal position according to the basic css.
.widget-area appears only in @media (max-width: 800px) where it is set to float:none. So on any display less that 800ps wide they no longer float horizontally.
So, theoretically the widgets should still be floating horizontally when viewed on a horizontal ipad since it has a resolution of 1024px, but when you turn it to a vertical view (768px) the widgets should line up one underneath the other.
Unfortunately I don’t have access to an ipad right now, so I can’t test this out.August 12, 2011 at 2:14 pm #2029Jay
Participantthanks. i’m making some progress but still having a problem with the background in the footer. for some reason it doesnt stretch all the way across the bottom.
any thoughts on how to fix?
August 12, 2011 at 2:21 pm #2030Steve
KeymasterThe link doesn’t work
August 12, 2011 at 2:39 pm #2031Jay
Participantweird. that’s the second time i posted a link to a pic and i’m able to open it via the link and others cant. but anyway…
August 12, 2011 at 2:53 pm #2032Margarete Koenen
ParticipantThe footer consists of id=”colophon”, inside that id=”supplementary” class=”three”, and inside that the three areas (id=”first” class=”widget-area”.)
Is the background color set in #colophon or #supplementary? Is the one that has the background set to a width of 100%?
August 12, 2011 at 11:12 pm #2033Jay
Participantthis is the site. i think i posted the wrong link in the very first post.
so to answer your question, yes, the background is on the “colophon”. there doesnt appear to be any width on it so i guess i’ll set that to 100% and see what happens.
-
AuthorPosts
- You must be logged in to reply to this topic.