Change #main background-color separately for each color_section

Hey BenjaminSpeedtsberg,

Thank you for the inquiry.

You are actually seeing the default background color of the main container. To change this, you have a couple of options:

1.) Disable the border radius in the bottom left and right corners of the color section. This will ensure that the color extends to the full width of the section without being cut off by the rounded corners.

2.) Apply a negative top and bottom margin to the color section to pull or push the element itself and the surrounding elements. This will conceal the main container’s background and allow the color to display as the background for the section.

You can try this css code.

#border-radius-top, #border-radius-full, #border-radius-bottom {
    z-index: 9999;
    position: relative;
}

#border-radius-top {
    border-radius: 80px 80px 0px 0px;
    margin-top: -80px;
}

#border-radius-full {
    border-radius: 80px;
    margin-bottom: -80px;
    margin-top: -80px;
}

#border-radius-bottom {
    border-radius: 0px 0px 80px 80px;
    margin-bottom: -80px;
}

You may need to adjust the space between the sections after adding the css code, using the horizontal/separator element or with a custom css.

Best regards,
Ismael

Hi,
Glad to hear that you have this sorted out, this seems it would be the best solution. Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike