Hello SitePoint Community,
I’ve encountered a challenge that I’m hoping to get some advice on. I’m working on a website where I need images to be responsive and adapt to different screen sizes. The problem is, while the images resize correctly on desktop browsers, they don’t seem to respond the same way on mobile devices. Instead of scaling down, the images overflow the container, causing layout issues.
Here’s a snippet of the CSS I’m using:
margin: 0 auto;
I expected the
.img-responsive class to ensure the images scale down on smaller screens, but it’s not working as intended on mobile. I’ve checked to make sure there’s no overriding CSS elsewhere.
Am I missing something obvious here? Could it be an issue with the way the container is defined, or is there something else I should consider for mobile responsiveness?
Any tips or suggestions would be greatly appreciated!