Sidebar dropping to the bottom under 960 pixels wide

Viewing 2 posts - 1 through 2 (of 2 total)
  • #14646
    iondot
    Participant

    My sidebar falls to the bottom when the screen size is less than 960 pixels wide. Is there a way to keep it on the right? Did I mess this up with my child theme customizations?

    I believe the fix/problem is in this code. Note that I have commented out a block of code that did not seem correct:

    @media screen and (max-width : 960px) {

    .onecol .threecol,
    .onecol .fourcol {
    width:50%;
    }

    #wrapper {
    max-width:760px;
    }

    #slider .entry-container {
    top:32%;
    padding: 0;
    }

    #slider .entry-summary {
    display: none;
    }

    #container {
    margin:2.2%;
    }

    .content-sidebar-wrap,
    #content,
    .page-template-template-sidebar-content-sidebar-php .content-sidebar-wrap #content,
    #sidebar {
    width:100%;
    }

    .onecol .hentry .entry,
    .onecol .hentry #comments,
    .onecol .hentry #respond {
    margin:2.4%;
    }

    .onecol .twocol .entry,
    .onecol .threecol .entry,
    .threefourthcol .threecol .entry,
    .onecol .fourcol .entry {
    margin:4.5%;
    }

    /*

    .onecol .twocol .entry,
    .onecol .threecol .entry,
    .onecol .fourcol .entry,
    .fourfifthcol .fourcol .entry,
    .onecol .fivecol .entry {
    margin:8.5%;
    }

    .onecol .twocol .entry,
    .onecol .threecol .entry,
    .onecol .fourcol .entry,
    .onecol .fivecol .entry,
    .fivesixthcol .fivecol .entry,
    .onecol .sixcol .entry {
    margin:16.5%;
    }

    .fourfifthcol {
    width: 87.7%;
    }

    .fourfifthcol .fourcol {
    width: 50%;
    }

    */

    .fivecol,
    .onecol .fivecol {
    width: 24.3%;
    }

    /*

    .fivesixthcol {
    width: 93.7%;
    }

    .fivesixthcol .fivecol {
    width: 50%;
    }

    .sixcol,
    .onecol .sixcol {
    width: 6.3%;
    }

    */

    /* */

    .page-template-template-full-width-php .hentry.onecol .wp-post-image,
    .page-template-template-full-width-php .hentry.onecol .entry-attachment,
    .page-template-template-full-width-php .hentry.onecol .post-gallery,
    .page-template-template-full-width-php .hentry.onecol .entry-thumbnail,
    .page-template-template-blog-full-width-php .hentry.onecol .entry-thumbnail,
    .page-template-template-blog-four-col-php .entry-thumbnail {
    float:none;
    max-width:100%;
    margin:0;
    }

    .page-template-template-full-width-php .hentry.onecol .entry-attachment,
    .page-template-template-full-width-php .hentry.onecol .post-gallery {
    width:100%;
    }

    .page-template-template-full-width-php .hentry.onecol .entry-header,
    .page-template-template-full-width-php .hentry.onecol .entry-thumbnail,
    .page-template-template-full-width-php .hentry.onecol .entry-summary,
    .page-template-template-blog-full-width-php .hentry.onecol .entry-header,
    .page-template-template-blog-full-width-php .hentry.onecol .entry-thumbnail,
    .page-template-template-blog-full-width-php .hentry.onecol .entry-summary,
    .page-template-template-blog-four-col-php .hentry.onecol .entry-header,
    .page-template-template-blog-four-col-php .hentry.onecol .entry-thumbnail,
    .page-template-template-blog-four-col-php .hentry.onecol .entry-summary {
    float:none;
    width:auto;
    }

    .single .format-audio object {
    height:30px;
    }

    .onecol .onecol .entry-summary {
    font-size:13px;
    line-height:1.62em;
    }

    .social-bookmarks iframe {
    min-height:0;
    }

    .page-template-template-portfolio-php .post.onecol .wp-post-image,
    .page-template-template-portfolio-php .post.onecol .entry-attachment,
    .page-template-template-portfolio-php .post.onecol .post-gallery {
    float:none;
    max-width:100%;
    margin:0;
    }

    .page-template-template-portfolio-php .post.onecol .entry-attachment,
    .page-template-template-portfolio-php .post.onecol .post-gallery {
    width:100%;
    }

    .page-template-template-portfolio-php .post.onecol .entry-header,
    .page-template-template-portfolio-php .post.onecol .entry-summary {
    float:none;
    width:auto;
    }

    .onecol #posts-nav {
    padding:2.8%;
    margin:2.3%;
    }

    #sidebar .onecol {
    width:33.3%;
    }

    #sidebar .twocol {
    float:none;
    width:auto;
    }

    #sidebar-left .widget,
    #sidebar-right .widget {
    margin:5.8%;
    }

    #sidebar .widget,
    #footer-area .widget,
    #sidebar-boxes .widget,
    .page-template-template-content-sidebar-half-php #sidebar-left .widget,
    .page-template-template-content-sidebar-half-php #sidebar-right .widget,
    .page-template-template-sidebar-content-half-php #sidebar-left .widget,
    .page-template-template-sidebar-content-half-php #sidebar-right .widget {
    margin:6.7%;
    }

    #sidebar-boxes,
    #footer-area {
    padding:2.2%;
    }

    #copyright {
    padding:1.7% 4.3%;
    }

    }

    You can see this here:

    http://maternitygallery.com/gallery/

    Thanks!

    #14655
    Daniel Tara
    Keymaster

    The sidebar dropping below the content is intentional and part of the responsive logic. You can also observe it splits in 3 columns and takes all the width of the wrapper.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.