Image not responsive on mobile

[beastmedia]

Hi
My site https://beastmedia.com works on desktop but images on mobile isn’t responsive and the parallax effect isn’t working either.

Do I need to change my settings? Thank you. Makoto

[nabeel]

Hi @beastmedia,

Thank you for reaching out to us.

• I checked your homepage and I see you’re using background images, please note background images behave differently on different screen sizes. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

• Upon checking your site, I see you’re using classic sections , please note that the parallax is disabled for mobile devices when using classic sections. You can use the new v2 sections to make parallax work in mobile devices.

Hope this helps!