TwentyEleven – Stop sidebars moving below content in small browsers

  • Resolved Olly – OWMC

    (@olly-owmc)


    12 years, 9 months ago

    I’m trying to make this twentyeleven child site work better on the iPad.

    mcscontracts.co.uk/

    At the moment the sidebar is still moving below the content when I reduce the width of the browser.

    I’ve removed this code from the header:
    <meta name="viewport" content="width=device-width" />

    I’ve removed all the code from style.css.

    I’ve added this code to style.css:

    #page {
clear: both;
max-width: none !important;
overflow: hidden;
padding: 0;
width: 690px !important;
}

#primary {overflow: hidden;}

.entry-content {width: 100%; clear: both; overflow: hidden;}

.alignright{float: right;}

.alignleft{float: left;}

    But it’s still not working. I’m stuck.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Olly – OWMC

    (@olly-owmc)

    Sorry, meant to say I’ve removed the “Responsive Structure” code from the CSS (not “all the code from style.css!).

    Thread Starter Olly – OWMC

    (@olly-owmc)

    completely messed my stylesheet now, help!

    Thread Starter Olly – OWMC

    (@olly-owmc)

    ok i have no idea what’s happened. i tried uploading my backup of the theme (style.css, header, footer… everything.

    i’m about to cry.

    Thread Starter Olly – OWMC

    (@olly-owmc)

    i created a new child theme using my backup, activated it… and i had my sidebar back on the right. but if i simply copy those same backup files to my original child theme folder it makes no difference at all, the sidebar is still hanging below my content.

    so having assessed it wasn’t anything to do with my files, i decided to play with deactivating plugins. i know this is recommended as a general check, but i didn’t think i had done anything to cause a plugin conflict.

    Deactivated W3 Total Cache and WP-HTML-Compression. Problem solved. Not sure which one it was. I’m new to compression and caching, maybe someone can tell me why this may have caused me problems.

    </panic>

    In the meantime, initial problem is still not solved. What’s the best way to prevent the sidebar from moving to the bottom on small browsers? The idea being that if the site is loaded on an iPad/iPhone, the user is presented with a site that is zoomed out so you can see the full width, or zoomed in but with horizontal scrolling.

    (i’m scarred too touch anything now!)

    Thread Starter Olly – OWMC

    (@olly-owmc)

    ok, i’m over my fear. have deleted the responsive structure down to the print section of the css file (as advised here)

    have tried this alchymyth post.

    i suppose i’ll have to sort out some validation errors before i get any help here. here goes.

    Thread Starter Olly – OWMC

    (@olly-owmc)

    Ah! Sorted.

    The gist of it:

    – Remove responsive structure
    – Add “min-width: 1000px” and “max-width: 1000px” to #page in css.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘TwentyEleven – Stop sidebars moving below content in small browsers’ is closed to new replies.