Why do images distort in mobile view on Debut theme?

Technical Q&A
1

I tried it all night, I can’t fix it.

I also consulted many people in the community with similar problems, but I still couldn’t solve them.

My Assets file has no theme.scss.liquid, no theme.scss, no any scss, only a theme.css file

The problem: Once I’m browsing on my phone, the images on the page are distorted, not 100% wide, and I can only see part of the image

问题反馈.PNG
问题反馈.PNG660×747 273 KB

www.mp2mingpin.com no password

Does anyone know how to fix it?

2

Hello,

Add this css in theme.css at bottom

@media only screen and (max-width: 600px) {
  .hero{
            background-size: contain;
    background-position: 100% 0% !important;
    max-height: 307px !important;
  }
}

Note: May be you have to write more css to adjust it. But this css will gives you idea.

Thanks

3

Thank you very much

I was surprised that your reply was so fast.

But I used this code to cause other problems. The width of my image is normal but the height is not normal. Is there any other way to use percentage instead of fixed px?

If it can’t use percentage, I think it’s better if don’t make changes