title: Several questions regarding, image resizing (viewport)
body: <p>I am having some Issues with how my images are aligned on my website. <br><br>
   1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left. <br><br>
   2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
   <br><br>
  You can find my code at <a href="https://codepen.io/anon/pen/mpKvMx" rel="nofollow noreferrer">https://codepen.io/anon/pen/mpKvMx</a>
  <br></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#myinput").keyup(function() {
      var val = $.trim(this.value);
      if (val === "")
          $('img').show();
      else {
          $('img').hide();
          val = val.split(" ").join("\\ ");
          console.log(val)
          $("img[alt*=" + val + " i]").show();
      }
  });
  
  $(".img").wrap('&lt;div class="alt-wrap"/&gt;');
  
  $(".img").each(function() {
      $(this).after('&lt;p class="alt"&gt;' + $(this).attr('alt') + '&lt;/p&gt;');
    })
     </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
   color: red;
  } 
  h2 {
   color:red;
  }
  p {
   font-family: Arial;
  }
  body {
   background-color: grey;
  }
  div { 
   text-align: justify; 
  }
  div img {
   display: inline-block;
   width: auto;
   max-height: 200px;
   height: auto; 
  }
  
   input[type=text] {
      width: 130px;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
  }
  
  input[type=text]:focus {
      width: 100%;
  }
   
  .alt-wrap { 
        display: block;
        position: relative;
        margin: 20px;
        color: whitesmoke;
        border: 1px solid mediumorchid;
  }
  
  .alt-wrap p.alt {
        position: absolute;
        opacity: 0; /* hide initially */
        left: 0; right: 0; bottom: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 22px;
        background-color: rgba(0,0,0,0.8);
        transition: all 300ms ease;
        transition-delay: 300ms;
  }
  
  .alt-wrap:hover &gt; p.alt { 
        opacity: 1; 
        transition-delay: 0s;
  }
      
  .imgContainer{
      float:left;
  }
  img {
  width: 200px !important; 
  
  }
  body {
  background: white !important; 
  }
  .imgContainer {
    position: relative;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
  }
  
  .imgContainer:hover .overlay {
    width: 100%;
  }
  
  .text {
    white-space: nowrap; 
    color: white;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  
  .dl {
  margin-top: 400px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;title&gt;Title&lt;/title&gt;
   &lt;head&gt;
    &lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;
    &lt;h1 align=center&gt;Heading&lt;/h1&gt;
    &lt;h2 align=center&gt;Sub-Heading&lt;/h2&gt;
    &lt;script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;"&gt;
   &lt;/head&gt;
   
   &lt;br&gt;
   &lt;br&gt;
   &lt;body&gt;
   
  &lt;div class="image123"&gt;
      &lt;div class="imgContainer"&gt;
          &lt;a href="cryptos/generic.html"&gt;&lt;img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Bitcoin&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
           &lt;a href="https://example.com"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Ethereum&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
           &lt;a href="https://example.com"&gt;&lt;img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Ripple&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
           &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Bitcoin Cash&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
           &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/ada.png" alt="Cardano"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Cardano&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
          &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/NEM.png" alt="NEM"&gt; &lt;div class="overlay"&gt;&lt;div class="text"&gt;NEM&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
           &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;LiteCoin&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Stellar Lumens&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/iota.png" alt="IOTA"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;IOTA&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/dash.png" alt="Dash"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Dash&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/neo.png" alt="NEO"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;NEO&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/tron.png" alt="Tron"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Tron&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/monero.png" alt="Monero"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Monero&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/eos.png" alt="EOS"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;EOS&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/icon.png" alt="ICON"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;ICON&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Bitcoin Gold&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;QTUM&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Ethereum Classic&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;RaiBlocks&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/lisk.png" alt="Lisk"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Lisk&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/verge.png" alt="Verge"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;Verge&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
   &lt;div class="imgContainer"&gt;
            &lt;a href="https://example.com"&gt;&lt;img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"&gt;&lt;div class="overlay"&gt;&lt;div class="text"&gt;OmiseGO&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;   
      &lt;/div&gt;
      
  &lt;/div&gt;&lt;br&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>