[resolved] TwentyEleven - Stop sidebars moving below content in small browsers (7 posts)

  1. Olly - OWMC
    Posted 4 years ago #

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


    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.

  2. Olly - OWMC
    Posted 4 years ago #

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

  3. Olly - OWMC
    Posted 4 years ago #

    completely messed my stylesheet now, help!

  4. Olly - OWMC
    Posted 4 years ago #

    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.

  5. Olly - OWMC
    Posted 4 years ago #

    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.


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

  6. Olly - OWMC
    Posted 4 years ago #

    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.

  7. Olly - OWMC
    Posted 4 years ago #

    Ah! Sorted.

    The gist of it:

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

Topic Closed

This topic has been closed to new replies.

About this Topic