CSS properties not working on certain mobile devices

Question

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.

(This is not a media query issue It's mainly images getting distorted, but only on select screens)

Answer 1

not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.