Site showing strangely in Firefox:

[nleaivy]

Site shows up strangely in Firefox:

The header hovers above the edge of the slideshow in Firefox:

This shows up properly in Chrome (ie. header sits on the bottom edge of the slideshow).

In Safari and Firefox, this reduced-opacity white section hovers above the bottom edge of its background despite no margin being set for that bottom:

This part shows up properly in Chrome (ie. white section extends to bottom edge of background):

Conversely, the map element shows up correctly in Firefox (fills out the entire container) while it shows up incorrectly in both Safari and Chrome (map fails to fill out entire container).

Is there anything that can help?

Thank-you.

[ruenel]

Hey Natasha,

Please remove the background color from your Column element. You should be adding it as an Upper Layer instead.

Best Regards.

[nleaivy]

Thanks but the problem in that case is the white would cover the whole image when I would just like it to cover 2/3 (horizontally) of the image like below:

Is there a way to do that and still have the white bg extend to the bottom edge?

[ruenel]

Hello Natasha,

Please enable the Flexbox option in your Column 2 element and then in your Row element inside the COlumn 2 element, force the minimum height to 100%.

You may have to add a custom CSS in your Row element as shown in the screenshot above.

Be advised that custom CSS coding is beyond the scope of our support. The above is just an example code on how you may achieve what you have in mind. You can check out our ONE service for a detailed and tailored solution.

Best Regards.

[nleaivy]

Thank-you!

[prakash_s]

You are most welcome @nleaivy