Search code examples
javascripthtmlcssangularmeta

Why doesn't viewport scale this image for mobile devices? it's not responsive

I'm trying to make my website responsive to mobile and tablets. I know one way of making it responsive is by including this meta tag:

 <meta name="viewport" content="width=device-width, initial-scale=1">

But when I view my website on mobile, this is the only image that doesn't scale.

<div class="container">

<div style="background:transparent !important" class="jumbotron text-center"><h1>built from the ground up</h1>

<img src="http://www.dotnettricks.com/img/nodejs/mean.png" alt="hrrysn">

</div>
Solution

  • The viewport meta tag is the right place to start but it's not enough at all. A quick-and-dirty fix might be max-width: 100% applied to the image but it really depends on your code rather than the image itself and without having the code it's hard to guess.

    Here are some additional sources that might be of assistance.

    Cheers!

    Martin