title: How to alter bootstrap carousel for tablet, mobile and wider device with 3 different setups?
body: <p>I have built a bootstrap carousel (full screne intro) on my website which works perfectly on big devices but on mobile device it shows only the left third of the carousel image but I would like it to be the center of the image.
  So I think a good solution would be to make 3 different setups for big devices, tablet and mobile with different versions of the image to make sure it has the focus I want. That should work through hiding all other carousel setups but for instance that one for mobile (if its on small device). if its on pc hide all but that one for big device,...etc.</p>
  
  <p>I don't want to add something to the carousel on mobile device, I want to change the carousel slider image (but only when mobile device is used).</p>
  
  <p>The carousel for big devices is in a div with id "carousel" so I tried like this for instance to hide carousel with big image on small/mobile devices:</p>
  
  <pre><code>@media (max-width:800px) {
      #carousel {
          display:none !important;
      }
  } 
  </code></pre>
  
  <p>Doesn't work for me though. Maybe someone can help me! Would be very grateful, thanks! :3</p>