Get all themes with lifetime updates for 95 USD. View all promotions

An introduction to your left and right sidebar column spacing

You will notice that in the live demo and screenshots of this theme, you see a left or right sidebar column that has a dark background. By default, this theme uses this colour scheme, but you can change the colours from the “Colours” tab of the customizer. What you cannot change is the padding — the space on the left and right side of the inner content area where the red arrows are pointing to:

devise sidebar padding

The default spacing is set as 2rem on the top, right, bottom, and left: 

#left-sidebar, 
#right-sidebar { padding: 2rem; }

If you decide to change the padding (space), simply copy the code above and paste it into the customizer’s Additional CSS tab. Change the 2rem padding to your own preference.

Making the Background Transparent

If you decide you do not want a background colour for your sidebar columns, you can add some more CSS code to the above code like this:

#left-sidebar,  #right-sidebar {     background-color: transparent; }

Don’t forget to click “Save & Publish” when you make these code changes.

Incidently, you can combine the padding changes and the transparency code in one snippet:

#left-sidebar,  #right-sidebar {     background-color: transparent;
padding: 2rem; }

What is an REM ?

You will notice I use rem units for my padding instead of px (pixels). This allows for flexible responsiveness and relative sizing when someone needs to increase or decrease page content text sizes. To learn more about rem units and how they compare to px (pixel) sizes, use this online tool to convert px to em (rem).

PX to REM