Add a border radius & still have spacing between 2 columns in a row

BB Theme
1

Hello

Just started using beaver and I am blown away I have managed to achieve in 1 hour & 15 mins what took me 10 hours using another responsive theme/plugin bundle!

I just have a styling question.

I have a row with 2 columns/ one has the testimonials mod in this & the other has plain text.

I have added a custom css id to both - goldbox & greybox items.
I have added border radius into my custom css (under customiser) but I also want to keep a space between these.

So far I have added this to my custom css - which gives me my border radius

#greybox { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; border:8px solid #555555;}

#goldbox { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; border:5px solid #d9b265;}

But in doing this there is no gap.

Can someone advise how to keep the gap.
Thanks in advance

Thank you

2

Hey Kiaran,

Welcome to the BB forums! :slight_smile:

Glad to hear the plugin is working out for you! Do you think you can share the URL of the site you’re working on so we can check? You can use the private reply option below.

Ben

3

[Content Hidden]

4

Hi Kiaran,

What you’re going to need to do is:

  1. Remove any custom CSS you have added to apply styling to these modules, but keep the ID you have added.

  2. Now go to the Column settings for each of your modules and give both them some margins, I used 10px when testing. https://cloudup.com/cVilJObFf5D

  3. Remove the background color option for both modules, as we will add this using CSS.

  4. Now add the following CSS and each module should have a background color you previously specified as well as a border-radius with spacing.

#greybox {
  background-color: #555;
  border-radius: 10px;
}
#goldbox {
  background-color: #D9B265;
  border-radius: 10px;
}

If this doesn’t work, would it be possible for you to provide temp admin access, please?

Thanks,
Danny

5

[Content Hidden]

6

Hey Kiaran,

Can you use the CSS snippet below instead and see if that’s what you’re looking for?

#greybox .fl-col-content {
  background-color: #555;
  border-radius: 10px;
}
#goldbox .fl-col-content {
  background-color: #D9B265;
  border-radius: 10px;
}

Ben

7

Absolutely perfect!!! thank you very, very much.

Issue now resolved.

8

Hi Kiaran,

My bad, I missed my mistake there. I apologise for any inconvenience that may have caused. Also, happy to hear Ben’s correction to my CSS resolved your issue.

Thanks,
Danny

9

Thank you both very much.

10

No worries at all, Kiaran. Glad we could help. :slight_smile: Enjoy!

Ben