Best option for a section with full width that can fit buttons inside??

[iampossible]

Hi,

In your opinion, what would be the best method to include a colored box with buttons inside that can fit the whole width of the page?

I’ve attached two pictures that achieve this by using the following method:
1) Insert Row, make it fit full width
2) Then insert a Boxed Content inside the row and customize it.

Is there another more efficient way of achieving the desired result?

Some options I’ve tried:
-Just use a “Boxed Content” without a “Row” element. This doesn’t work because the boxed content cannot be made to fit the whole page.
-Change the row settings and try to reduce padding, unfortunately this does not work because the “Padding-Vertical” is already set to 0 and cannot be reduced further using this option.
-Try and change the “Margin-Vertical”, unfortunately this is already set to 0 and cannot be reduced further using this option.
-Gone through other answers on the Dante Forum as well, no luck there.

Warm Regards

[iampossible]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please do this:

1) Create a Row.

2) Insert 3 Text assets from the PB. You can set the background color option for this Text column using an Extra Class name within the Text assets settings.

3) Within the Text column, use the Swift Framework shortcode builder to insert three buttons.

Ex below:

—

Can you provide a link to the page regarding the padding question.

[iampossible]

This reply has been marked as private.

[David Martin – Support]

Hi,

2) There is no documentation as such as each usage case is different, this often requires an understanding of CSS also depending on what you want to do.

As you have chosen a white button, you would need to override this using an example like this:

.my-custom-class a.sf-button.white {
    color: red !important;
}
.my-custom-class a.sf-button.white:hover {
    color: blue !important;
}

I see already you have used span tags and inline CSS to override the color.

—

You can reduce the padding with CSS, an example:

.spb_box_text .box-content-wrap {
    padding: 10px;
}

Thanks.

[iampossible]

Thank you, your code worked perfectly!

[Rui Guerreiro – SUPPORT]

Great. Thanks David.

-Rui