Page does not adjust to its full width on iPad and mobile phones – twentyeleven

please post a link to your site

It’s under a test site.

Wow, it’s you!
Your posts have helped me a lot with other issues.
Thank you so much!!!!

fyi:
I copied the whole @media section from the parent theme’s css and pasted it on the child theme css hoping this will put the good settings back… but this didn’t do anything.

Please note that you are already copying all of the styles over through the @import line. By copying the styles further, you are only duplicating them.

oh, that’s right.. I just erased them from the child css.
any ideas why the default eleven twenty theme is not working on ipad and mobile phones?

there is:

/* makes page width 1000px */
.one-column #page {
max-width: 1000px;
min-width: 1000px;
}

which you might need to overwrite in the @media queries;

then there is theimage in the footer which does not scale down;

possibly add this to style.css of the child theme:

#colophon img { max-width: 100%;height: auto; }

if this results in unreadable information on the footer image, reconsider how to add the info into the footer.

btw: I use Firefox’ web developer add-on to check the css and html of sites to find out where things are formatted; https://addons.mozilla.org/en-US/firefox/addon/web-developer/?redirectlocale=en-US&redirectslug=Web_Developer_Extension_(external)

but most recent browsers’ ‘right-click’ – ‘inspect element’ features should work similar.

alchymyth,

I just added #colophon img { max-width: 100%;height: auto; } to css.

then I added

@media (max-width: 980px) {
.one-column #page {
max-width: 100%;
min-width: 100%;
}
}

to the child css and it seems to be working now.
but the main navigation bar shift down a line even if there is space to expand.
any ideas how to fix this? I want all the menu items stay on one line if possible.

but the main navigation bar shift down a line even if there is space to expand.

there are some resolved topics for that in the forum;

caused by line 690:

#branding .only-search + #access div {
	padding-right: 205px;
}

add the same into style.css of the child theme, but with a smaller value for padding;

Thank you!!
It’s perfect now!