Question 2698 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to make Hero Image fill entirely on a mobile screen without ruining quality? – WordPress

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.

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search