Box on top of image

Hey Richard,

Are you using a boxed layout? (default is stretched layout, can be found in Enfold > General Layout > Layout > Use stretched or boxed layout?).
If you’re using a boxed layout then I think you can just use Color Section to do that with some background, but if you’re using a stretched layout then we’ll need to use some Custom css codes.
Can you give us a link to your contact page? so we can try to inspect it and give you custom css codes that should work, you can put the link in private content.

Best regards,
Nikko

Hi Richard,

Thanks for giving us admin access.
I have commented out the css codes you added except for:

#top label {
    color: white;
}

which I replaced with:

#top label {
    color: #554c46;
}

then added this css codes (I added Custom Css Class for the elements in the page):

#top .contact-section-row {
    display: block;
    float: none;
    margin: 0 auto;
    width: 80%;
}

.contact-section-row .av_textblock_section {
    width: 100%;
    background-color: white;
    margin: -40px -40px 20px;
    padding: 70px 40px 50px;
    box-sizing: content-box;
}

.contact-section-row .contact-section-heading {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
}

.contact-section-row .contact-section-form {
    max-width: 80%;
    width: 420px;
    margin: 0 auto;
}

Then in your page I have modified the structure. :)
Let us know if you need further assistance or if you need more explanation on what we tweaked.

Best regards,
Nikko

Hi Richard,

We’re glad that we could help :)
The Custom Css Class section helps a lot with customization, you just need to assign class names so it is applied specifically on that element and without worrying about affecting other pages (and you can re-use it).
Anyway, thanks for using Enfold and have a great day!

Best regards,
Nikko