Move Main Sidebar Widget To Top For Mobile

stephendove8 · Member · Nov 10, 2015 at 12:48 pm
Copy link

Add topic to favorites
Hi,

I’m trying to move my main sidebar widget to the top of the page on mobile design to exactly how it displays on desktop. My site uses the Dynamic News theme and any help would be greatly appreciated.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 10, 2015 at 11:19 pm
Copy link
The main reason that responsive themes are designed to have the sidebars move below the content on smaller tablets and phone is to keep your content front and center for your visitors and to keep it as readable as possible since that is the most important thing. Sidebars are usually used for things that aid in navigation, such as search, category/tag/recent posts widgets, social media widgets and the like, rather than content.

On mobile and smaller tablets, if you keep the main sidebar beside the content, then the content ends up getting very, very narrow and hard for people to read. There simply isn’t enough width on a screen narrower than about 960px for both the content and the sidebar.

All that said, here would be the code. As you will see when you view your site on a mobile, virtually nothing is easily readable
```
@media only screen and (max-width: 60em) {
#sidebar {
    clear: none;
    float: right;
    width: 28%;
    margin: 2em 0px 0px;
}
#content {
    float: left;
    padding-right: 0px;
    width: 70%;
}
}
```
stephendove8 · Member · Nov 11, 2015 at 4:15 pm
Copy link
Okay understood, thanks for your reply and help.
thesacredpath · Member · Nov 11, 2015 at 8:03 pm
Copy link
You are welcome.

No items found.