[Jay]

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!

[Joly MacFie]

Um, attachment not working..

[Steve]

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

[Jay]

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.

[Jay]

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

[Steve]

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

[Jay]

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

[Margarete Koenen]

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.

[Jay]

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.

[Margarete Koenen]

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.

[Jay]

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?

[Steve]

The link doesn’t work

[Jay]

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

[Margarete Koenen]

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

[Jay]

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.

[Author]

Posts