Image doesn't appear correctly on Firefox only

[MulderDSM]

At the top of each page on this site, I have a image that should be 100% of browser in width, with 300px height and overflow hidden. Works perfect on Google Chrome, Safari, but not on Firefox. I need your assistance to correct this issue.

https://wordpress-435088-1505280.cloudwaysapps.com/about/get-here-parking/

[ruenel]

Hello @MulderDSM,

Thanks for writing in!

This issue is caused by your custom CSS. You have added this:

.page-header-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Kindly removed this code to resolve your issue. If you wanted to limit the height, please upload an image with a limited height only.

Hope this helps.

[MulderDSM]

I would prefer to have the css do the work instead of the client. There is no CSS for the client to upload any size image and have that image display at 100% but with a maximum height of 300px, basically having the CSS crop off or hide the rest of the image?

[tristup]

Hi @MulderDSM,

The correct way to resolve this issue is what suggested by my colleague, still, if you want that to be solved only CSS, you can try the following custom CSS by adding to the Theme Options > CSS

.page-header-image img 
{
    height: auto !important;
    max-height: none !important;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Alternatively, I would suggest you to use the Map element to avoid such issue with the images.

Thanks

[MulderDSM]

Ok thank you. I will resize all images to correct dimensions.

[tristup]

Hi @MulderDSM,

You are most welcome.

Thanks