Question

I have this:

<meta name="viewport" content="width=device-width, user-scalable=no" />

So the user doesn’t need to zoom, but I have an image which is 417x47 and it looks too big, I mean the user has to scroll left and right in order to see it.If I remove <meta name="viewport" content="width=device-width, user-scalable=no" /> It looks how I want, but I can’t do this since I have a lot of text content, Is there a way to scale down only the images, or what’s the size that I will need to resize it.

Answer 1

You can use a media query to set the width of the images to 100%, or a pixel-size you think its right, like so:

@media only screen and (max-device-width: 480px) {
    img {
        width: 100%;
    }
}