I personally can’t just tell you one trick or method to do that, but you can try reading up on responsive themes, here is one article I found (but I haven’t read it) http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/
Your child theme css doesn’t completely override the TwentyEleven css code that is in there for responsive design.
Specifically, on line 2271 of http://themetest.halodiehards.org/wp-content/themes/twentyeleven/style.css it is performing the width change and overriding the settings.
If you look on line 2261 you will find…
@media (max-width: 800px) {
This tells CSS that when a browser window is less than 800 px wide, override style with the code in my brackets.
You probably want to copy the css to your child theme to include the responsive styles as well. Starting on 2261 with 800px mentioned above, and then override what behavior you don’t like or make it better.
line 2374, @media (max-width: 650px) {
line, 2476, @media (max-width: 450px) {
line, 2487, @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
Thanks for such a quick response, guys. I wasn’t familiar with “responsive design” so thanks for filling me in on that. I’m hesitant just yet to try alienneila’s advice until I verify with you a couple of things.
Does TwentyEleven always stretch the sidebar across the content area when it’s minimized? Because if not, if possible I’d like to fix whatever I did wrong in the child css instead of putting more code in.
Could I bother you to take a peek at my child theme’s CSS?
I hope I’m doing this right; I’ve just created a pastebin account. Here is the child’s style.css, as you’ll see, I’ve borrowed code to make a second side-bar, added a featured slider, and dropped my entire page down so the background is the header. It’s all well labeled:
pastebin style.css
Use a mobile plugin or a theme that supports mobile…
http://wordpress.org/extend/plugins/wptouch/
@halo: As long as the responsive code is loading and not being overridden by other css or deleted, then yes it will resize when the browser window is smaller than the sizes defined in the css.
CSS is loaded by order priority first, so if you use
#content {
width: 700px;
}
on line 20, and then on line 40
#content {
width: 800px;
}
the second one is what the browser will use. But then priority comes down to weights.
.home #content {
width: 700px;
}
will not be overridden by line 40 because the weight of a class and the id is heavier than just the id.
Once you get down to the @media sizes, they’re nested CSS, which makes them even heavier and will override anything before or below it for the same style once the browser window matches the criteria of being say… 800px wide or less. So the only way to stop the functionality of the media screen CSS is to either remove it, or match it in your child css so that new rules apply to those elements.
Thanks for all your help, I’ve learned a ton playing around with the responsive css today, and I’ve decided I like the look of the widget background in the resized content area! Still stumped at why it works that way, but I’ll keep it 🙂
