I need help with a hero image to render perfectly on a mobile screen.

The Pages I need help with are:

1. https://www.solarwhiz.com.au/home-ventilation/
2. https://www.solarwhiz.com.au/commercial-ventilation/industrial-ventilation/

These pages are fine in rendered on PC or laptops.

Any guidance is deeply appreciated.

CodePudding user response：

There are 3 ways.

1. Use img tag with width: 100% instead of background image in div;
2. Make div height smaller on mobile;
3. Get different photo for mobile and change on view resize;

CodePudding user response：

The methods mentioned in the answer of @Kintamasis are completely legit and I did a 1 for that. I'd also recommend going with 1st one that will take care of full responsiveness.

If you still just want to fix it using CSS then here it is:

div.et_pb_section.et_pb_section_0 {
    background-size: 100%;
    padding: 16vw 0px;
}

let me know if this works for you.