Group Admins

WordPress Troubleshooting and Support

Public Group active 1 year, 2 months ago ago

WordPress support from our community

how to make wordpress site ipad friendly

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1226
    Jay
    Participant

    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!

    #2020
    Joly MacFie
    Participant

    Um, attachment not working..

    #2021
    Steve
    Keymaster

    or just use a different theme for the iPad: http://wordpress.org/extend/plugins/onswipe/

    #2022
    Jay
    Participant

    i 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.

    #2023
    Jay
    Participant

    it 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???

    #2024
    Steve
    Keymaster

    Firebug + 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.html

    #2025
    Jay
    Participant

    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) {

    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???

    #2026
    Margarete Koenen
    Participant

    All 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.

    #2027
    Jay
    Participant

    well 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.

    #2028
    Margarete Koenen
    Participant

    The 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.

    #2029
    Jay
    Participant

    thanks. 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.

    here’s the new screenshot

    any thoughts on how to fix?

    #2030
    Steve
    Keymaster

    The link doesn’t work

    #2031
    Jay
    Participant

    weird. 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…

    try this link

    #2032
    Margarete Koenen
    Participant

    The 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%?

    #2033
    Jay
    Participant

    this 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.

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.