Which sidebar gets bumped to the bottom when the page is narrow

This topic has 3 replies, 2 voices, and was last updated 7 years, 7 months ago by Mahesh.

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

Author

Posts
May 4, 2017 at 5:07 pm #115226

Blackwood
Participant

Is there a way to set things up so the left side stays where it is and the right side bar gets moved to the bottom when the browser is too narrow? A child theme solution would be great.

https://avida-ed.beacon-center.org/

May 5, 2017 at 3:11 am #115251

Mahesh
Participant

@blackwood: Can you please clarify more.

Regards,
Mahesh

May 5, 2017 at 12:04 pm #115277

Blackwood
Participant

I have catch flames set up with two side bars (left and right). When the browser window is wide, both side bars show up on either side of of the main center area. When I make the window narrower, the left side bar appears to disappear. Actually the content of the left sidebar shows up at the bottom and can be seen by scrolling down.

Is there anyway for the right side bar to be the one to get bumped to the bottom and seem to disappear? I am willing to use any of the free catchthemes, but would need to get permission to pay for a premium theme – as this is a fairly simple web site to support a free educational software application.

Thanks
Diane

May 8, 2017 at 12:08 am #115412
Mahesh
Participant
@blackwood: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:
```
@media screen and (max-width: 1000px) {
    .three-columns #main #secondary {
    	display: none;
    }

    .three-columns #main .content-sidebar-wrap {
    	width: 67%;
    }

    .three-columns #main #primary {
    	float: right;
    	width: 100%;
    }

    .three-columns #main #third-sidebar {
        width: 30%;
    }

    .three-columns #third-sidebar .widget {
    	width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .three-columns #main .content-sidebar-wrap {
    	width: 100%;
    }
    .three-columns #main #third-sidebar {
        width: 100%;
    }
}
```
Regards,
Mahesh
Author

Posts