Can't Prevent Cropping on Background Image of section

Hi 🙂

I'm having issues making a specific page section's background image height resize proportionately so that it's never cropped when the desktop browser changes size.

(it's for the image above the form, its a collage of squares that's just one image)

I used this code I found online, but it only works for mobile viewing.

[data-section-id="ID_HERE"] {

  min-height:clamp(0px, 56.25vw, 100vh) !important;

}

If I can get away with another question.. Also can't seem to check the boxes or hit submit in the form at the bottom of the page. 
I've only managed to get it to work if I make the form a Lightbox.. But client wants it on the page as it is now.

password is sda

Thank u!

On 12/8/2023 at 7:51 PM, Ziggy said:

Can you share your website URL?

The clamp on min-height assigns an ideal value, min value and max value so won't be very good at doing the job you want. First make sure that section doesn't have more than a few rows on mobile OR desktop, and then try this code:

[data-section-id="ID_HERE"] {
  height: 56.25vw !important;
}

I can't answer what is wrong with the form, but it may be that you have overlapping blocks that are covering part of the form. If you share your website URL I can look.

Hi, I realised what you meant about the rows, and I removed them and your code now works perfectly! Thank you SO Much!

One problem fixed 😄 Thanks again

4 hours ago, sda said:

One problem fixed 😄 Thanks again

Nice one!