Section column to overlap footer

Hi team,

I’m trying to recreate the effect in the attached screenshot where the contact form overlaps the column below (in this case the footer, in my case the map).

I’ve set up the contact form in a column on the section above the map, but can’t figure out the best way to get this column to overlap the map.

I’m working in my staging environment on the page named “test” and the footer named “homepage footer 2024”

Can you please help me out?

GCD home page contact section overlap footer

Thanks,
Ashley

Hi Ashley,

Thanks for reaching out.
You can add any DIV element and set the Bottom position in negative values, as shown in the given screenshot.

Hope it helps.
Thanks

Thank you!

Next question…I’ve styled my form, but I can’t get the placeholder text on the select field (select your location) to format correctly (color: #4498aa font-style: italic ).

I’ve tried about 10 different things and none of them have worked. Can you please advise?

Note that I’ve tried the following:

/* Style placeholder text in Gravity Forms */
.gform_wrapper input[type=“text”]::placeholder,
.gform_wrapper input[type=“tel”]::placeholder,
.gform_wrapper input[type=“email”]::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper select::placeholder {
color: #4498aa!important;
font-style: italic !important;
}

/* Style placeholder text in Gravity Forms with Enhanced User Interface /
.ginput_container_select select[aria-label
=“Select”] option[disabled],
.ginput_container_select select[aria-label*=“Choose”] option[disabled] {
color: #4498aa!important;
font-style: italic !important;
}

/* Style placeholder text in Gravity Forms /
.gform_wrapper input[type=“text”]::placeholder,
.gform_wrapper input[type=“tel”]::placeholder,
.gform_wrapper input[type=“email”]::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper .ginput_container_select select[aria-label
=“Select”] option[disabled],
.gform_wrapper .ginput_container_select select[aria-label*=“Choose”] option[disabled] {
color: #4498aa!important;
font-style: italic !important;
}

/* Style placeholder text in Gravity Forms */
.gform_wrapper input[type=“text”]::placeholder,
.gform_wrapper input[type=“tel”]::placeholder,
.gform_wrapper input[type=“email”]::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper .gfield_select select option[disabled] {
color: #4498aa!important;
font-style: italic !important;
}

/* Change the color of the placeholder text in Gravity Forms Enhanced UI dropdown */
.gform_wrapper .gfield_select_container .chosen-single abbr {
color: #4498aa!important;
}

/* Change the color of the placeholder text in Gravity Forms Enhanced UI dropdown */
.gform_wrapper .ginput_container_select .chosen-single span {
color: #4498aa!important;
}

Hi Ashley,

Regretfully, we don’t provide any support for the custom CSS code. If you still want us to look into it, you can avail of our newly launched service called One, where we answer questions beyond normal theme support.
I would also request that you create a new ticket for each question to avoid any confusion.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.