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.