title: Make gallery suitable for phone view (small screen)
body: <p>I have created an image gallery in HTML/CSS/JS however when I minimize the screen the image change doesn't appear it just opens up the image in a new window.</p>
  
  <p><strong><em>Large Screen when the image is pressed:</em></strong>
  <a href="https://i.stack.imgur.com/3IF2A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3IF2A.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Small Screen when the image is pressed:</strong>
  <a href="https://i.stack.imgur.com/H2Z6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H2Z6t.png" alt="enter image description here"></a></p>
  
  <p>How can I keep it like that but just minimize it for smaller screens?</p>
  
  <p>Here is the project:<a href="https://codepen.io/mican/pen/awxmpY?q=magnific&amp;order=popularity&amp;depth=everything&amp;show_forks=false" rel="nofollow noreferrer">https://codepen.io/mican/pen/awxmpY?q=magnific&amp;order=popularity&amp;depth=everything&amp;show_forks=false</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article class='gallery'&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1600/1200?image=1081'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1200' src='https://unsplash.it/1600/1200?image=1081' width='1600'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1600/1600?image=1014'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1600' src='https://unsplash.it/1600/1600?image=1014' width='1600'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1200/1000?image=267'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1000' src='https://unsplash.it/1200/1000?image=267' width='1200'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1200/1600?image=266'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1600' src='https://unsplash.it/1200/1600?image=266' width='1200'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1000/1400?image=634'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1400' src='https://unsplash.it/1000/1400?image=634' width='1000'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1200/1200?image=923'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1200' src='https://unsplash.it/1200/1200?image=923' width='1200'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1400/1000?image=682'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1000' src='https://unsplash.it/1400/1000?image=682' width='1400'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1000/1400?image=173'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1400' src='https://unsplash.it/1000/1400?image=173' width='1000'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
    &lt;a class='gallery-link' href='https://unsplash.it/1200/1000?image=943'&gt;
      &lt;figure class='gallery-image'&gt;
        &lt;img height='1000' src='https://unsplash.it/1200/1000?image=943' width='1200'&gt;
        &lt;figcaption&gt;Photo caption&lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/a&gt;
  &lt;/article&gt;
  &lt;footer id='footer' role='contentinfo'&gt;
    &lt;div class='container'&gt;
      &lt;a class='logo' href='https://codepen.io/collection/XRoxGR' rel='home'&gt;Calibration theme&lt;/a&gt;
      &lt;a class='copy' href='https://mobilemarkup.com'&gt;&amp;copy; mobileMarkup.com&lt;/a&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong><em>basically when the image is pressed in a smaller screen it opens a new page in a smaller screen but I want it to open the gallery just like the larger screen</em></strong> </p>