By default, most WordPress themes slides sidebars to bottom on small screen devices like on mobile phones and tablets. But you must have observed various websites automatically remove the sidebars if it’s viewed on a small screen and keep it visible everywhere else.
In easy words you can say that the sidebars goes off on smartphones but desktop and tablets show it at the same time.
For making this feature work on your website, first thing you will be needing to do is find out the sidebar CSS of your website’s theme.
You can easily do so by visiting your website home, right clicking and selecting ‘Inspect Element’ option from the context menu.
Now find out your sidebar’s div id and then you can either make correction using following CSS code right inside your theme’s style.css file or use some custom CSS inserter plugin.
For Example:
@media (max-width: 680px) {
.your-sidebar {
display:none !important;
}
}
In the above example ‘max-width’ defines the maximum screen size to show the sidebar. Screen size less than the defined maximum size would be hiding your sidebar.
How To Make This Trick Work For Twenty Fourteen WordPress Theme?
Twenty fourteen has two sidebars: primary sidebar and content sidebar. For disabling sidebars in a Twenty Fourteen WordPress theme (or child theme) use following CSS:
@media (max-width: 680px) {
.content-sidebar {
display:none !important;
}
}
@media (max-width: 990px) {
#secondary {
display:none !important;
}
}