Sidebar at small displays

Hello there!

This is the way the theme was originally designed to behave. In order to fix it, you’ll need to do some customisation.

First of all, a quick suggestion: don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Once that’s all ready, this CSS will show your sidebar on smaller screens:

@media (max-width: 1000px) {
  .sidebar {
    display: block;
    width: 100%;
  }
}

Hi, I have a child theme, but when I click at Appearance -> editor, it shows me this message:
This theme is broken. Template is missing.
So I am not sure, if the child theme works well. I have custom CSS installed and it works though, but I am not sure for what do I need a Jetpack plugin? Thanks for help and answer anyway ! =)

This sounds like your child theme hasn’t been set up quite right. Make sure that your style.css file contains a reference to the parent theme, like so:

/*
Theme Name: Child theme
Theme URI: https://example.com/
Description: Child theme for the Baskerville theme
Author: Your name here
Author URI: https://example.com/about/
Template: Baskerville
Version: 0.1.0
*/

For your change, it may be easier to use custom CSS rather than a child theme. If you already have a plugin that allows you to enter your own CSS code activated, try entering the snippet above. This should allow you to see the sidebar on smaller screens.

Cheers!

Yeah I see, it doesnt work though. I think that my style.css is correct. But the Custom CSS media queries doesnt work. Should I write this?

.sidebar fright

Actually, I just realised the code above was inaccurate—for your child theme to work correctly, it should refer to Baskerville with a lowercase, like so:

/*
Theme Name: Child theme
Theme URI: https://example.com/
Description: Child theme for the Baskerville theme
Author: Your name here
Author URI: https://example.com/about/
Template: baskerville
Version: 0.1.0
*/

The CSS code above should work correctly, but it doesn’t look like it’s being applied to your site—where are you entering it?

in the custom CSS =)

Could you upload a screenshot of where you’re entering the CSS? I can’t see any custom CSS being output to your page, so that might be part of the problem here. ??

Additionally, your child theme’s stylesheet isn’t being loaded—if you’re any adding CSS code there, it also won’t be applied.