Hero Image is Not Responsive On Mobile
Tuan
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
Paul Frankowski
Accepted AnswerIf I may...
-
You cannot use iStock (Getty) images with watermark without buying them on production website. It's illegal. You can pay a big fee.
-
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.
Mehtaz Afsana Borsha
Accepted AnswerHi,
Give me a screenshot of your issue please for better understanding
-Regards
Tuan
Accepted AnswerPlease 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.
Mehtaz Afsana Borsha
Accepted AnswerYou have set a background color on this image please follow the screenshot below:
Tuan
Accepted AnswerHi 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.
- This is how it should look - I resized my browser window and it looks fine
- This is how it looks currently - Screenshot on my mobile device, it looks zoomed in and blurry
Thanks
Mehtaz Afsana Borsha
Accepted AnswerIt seems you real image also blurry
http://tnguyen.me/images/2021/09/30/mobile-istockphoto-1181558031-2048x20481.jpg
Tuan
Accepted AnswerThere 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.
- This is how it should look - I resized my browser window and it looks fine
- This is how it looks currently - Screenshot on my mobile device, it looks zoomed in and blurry
Mehtaz Afsana Borsha
Accepted AnswerHi,
Allow me some time please. I will forward this issue one of our senior staff
Thank you
Muntasir Sakib
Accepted AnswerHello 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
Accepted AnswerThank 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.