Skip to main content
All CollectionsAdvanced Design
Add spacing around your widgets & banners
Add spacing around your widgets & banners

How to create spacing around your widgets and learn some easy beginning CSS coding

Niall Diamond avatar
Written by Niall Diamond
Updated over 6 years ago

Sometimes to get that perfect look you need to add just a little spacing around your widgets or banners. This can be done in 2 different ways. 

First Way: Use the widget settings 

The simplest way is to use the widget settings. Many of the widgets, like banners, have margin settings inside the widget settings on the layout. 

Second Way: Use a custom class 

The second way to achieve spacing around your widgets is to use custom classes. This is great because you get to work with real CSS (Cascading Style Sheets) which is real coding 🙀 but not at all scary 🤓. It's cool your a rockstar!!

First Make Up a Class Name: Make it fun by adding your Initials first and then something descriptive.

Custom class example: ND-Banner-Spacing 

Step 1 :

 Add your custom class to the widgets

Step 2:

 Copy and paste the below code into your CSS Block 

/* This is for space around my widget */

.nd-banner-spacing {
margin-left:20px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
}

 Save Your Changes and refresh your page. 💪


👍 ProTip: So if you are a superstar you probably noticed that the middle section has double the spacing as the other sides. This is because we have added a 20px margin to both banners...thus 20+20=40px in the middle. 

Simple fix. 

Give each of the banners a unique custom class name by simply adding a "l-" or "r-" for left and right.
e.g. " r-nd-banner-spacing " and " l-nd-banner-spacing "

Now give each banner half the margins 

/* make the left banner have margin-right of only 10px */
.l-nd-banner-spacing {
margin-left:20px;
margin-top:20px;
margin-right: 10px;
margin-bottom:20px;
}

/* make the Right banner have margin-left of only 10px */
.r-nd-banner-spacing {
margin-left: 10px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
}

😎 If you still have your original code ( from step 2 above ) with the double spacing you can remove it now as you aren't using it.

That's it You did it ! Nice Job SuperStar 🚀

Did this answer your question?