title: Make bootstrap carousel display differently on different devices
body: <p>I am having trouble making my bootstrap carousel display differently on a mobile device and a desktop screen.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
  
     &lt;div class="item active"&gt;
        &lt;center&gt;&lt;img src="img.jpg" alt="..."&gt;&lt;/center&gt;
        &lt;div class="carousel-caption"&gt;
         &lt;p&gt;1st Screen&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
       &lt;div class="item"&gt;
       &lt;center&gt; &lt;img src="img2.jpg"  alt="..."&gt;&lt;/center&gt;
        &lt;div class="carousel-caption"&gt;
         &lt;p&gt;2nd Screen&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;center&gt;&lt;img src="img3.jpg" alt="..."&gt;&lt;/center&gt;
        &lt;div class="carousel-caption"&gt;
         &lt;p&gt;3rd Screen&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>You can view the site <a href="http://talk.hostoi.com/bootstrap/bootstrap.html" rel="nofollow">here</a></strong></p>
  
  <p>The problem I am having is that my image sizes are appearing different on mobile devices, the 3 images I have are:</p>
  
  <p><code>img.jpg</code> Dimensions = <code>700 x 378 pixels</code></p>
  
  <p><code>img2.jpg</code> Dimensions = <code>700 x 378 pixels</code></p>
  
  <p><code>img3.jpg</code> Dimensions = <code>700 x 378 pixels</code></p>
  
  <p>The images show up fine on desktop devices however on mobile devices the whole image seems to enlarge and some of image goes off the screen.</p>
  
  <p>I want a media query which makes all images <code>width:100%</code> on mobile devices only.</p>
  
  <p>Or is there is an easy way to preserve the size of images on all devices?</p>
  
  <p>Appreciate the help</p>