Hero Image is Not Responsive on Mobile - Forum | JoomShaper
Solved SP Page Builder

Hero Image is Not Responsive on Mobile

Asked by Tuan 5 years ago Last activity 5 years ago

Hi Team,

The Hero image looks good on a laptop, desktop but when viewed on a mobile device, it is not responsive and the image looks blurry, how do I resolve this?

Also the background image in the rows is not responsive on a mobile either, it looks zoomed in and blurry.

Please advise

Thanks

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
5 years ago

If I may...

  1. You cannot use iStock (Getty) images with watermark without buying them on production website. It's illegal. You can pay a big fee.

  2. About blurry image on iPhone - whole Internet talk about this for years to NOT use both settings together:

background-size: cover;
background-attachment: fixed;

Safari browser doesn't like it in Mobile view and that's why it doesn't look good.
Do not use "fixed" value (!) - or use custom CSS to disable that value in mobile view only.

10 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
5 years ago

Hi,

Give me a screenshot of your issue please for better understanding

-Regards

Tuan Asked this
5 years ago

Please see screenshot attached in hidden section.

When I resize my browser it looks good but on a mobile device it looks very zoomed it and blurry.

Tuan Asked this
5 years ago

Hi Mehtaz,

I am not referring to the background color, the background image itself is the issue and is too zoomed it.

I found a few other threads on this, one is below:

https://archive.joomshaper.com/forums/helix-ultimate-template-iphone-home-image-size

I tried to create a second duplicate row that only appears on mobile and tablet with a resized image (as suggested above) but it still looks bad.

I have shared two screenshots in the hidden section.

  1. This is how it should look - I resized my browser window and it looks fine
  2. This is how it looks currently - Screenshot on my mobile device, it looks zoomed in and blurry

Thanks

Tuan Asked this
5 years ago

There seems to be a disconnect from what I am explaining to how you are responding.

The issue IS NOT ONLY that the background image is blurry, it is ALSO that it is ZOOMED IN and NOT RESPONSIVE on a mobile device.

Please include another teammate on this (Pavel if possible). As I need to fix this URGENTLY.

I am again sharing two screenshots in the hidden section.

  1. This is how it should look - I resized my browser window and it looks fine
  2. This is how it looks currently - Screenshot on my mobile device, it looks zoomed in and blurry
Mehtaz Afsana Borsha Staff
5 years ago

Hi,

Allow me some time please. I will forward this issue one of our senior staff

Thank you

Tuan Asked this
5 years ago

Thank you, please keep me updated as soon as you can.

Muntasir Sakib Staff
5 years ago

Hello Tuan,

I hope you are doing well.

If you allow me - the image is blurry itself, see the screenshot here. Change the image and it will be fixed automatically. About the responsiveness, the image is working fine on mobile environment from our end.

As per your asking, it exactly looks like this how you wanted it to be.

Thanks!

Tuan Asked this
5 years ago

Thank you, it looks much better now and the hero background image is responsive and looks correct on a mobile device.

For others experiencing this issue, the below worked:

Go to your hero Row settings,

  • Set Background Size: Cover
  • Set Background Attachment: Scroll (not Fixed)

And appreciate the note on the stock images but these are placeholder images for my client to view/approve before purchasing the licensed stock images for production.

Log in to reply.