How do I eliminate white space between responsive columns?

Question

I'm having trouble finding a solution to the white space that appears between the second and third images when the two column layout is told to go to one in response to a smaller browser window (i.e. specifically, viewing on a mobile phone).

Here's the link: http://staging1.oakpark.co/72-2/

I've tried coding within the responsive section of the CSS to no avail.

I'm sure there's a simple solution but I'm relatively new to coding so any help or ideas would be greatly appreciated. I'm thinking coding for the 'nthchild' might be the way to go?

CSS

@font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: 
url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"),
url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"),
url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg");
}

body { 
 padding: 0; 
 margin: 0; 
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 1100px) {
  .column  {
    width: 50%;
  }
}

@media screen and (max-width: 800px) {
  .column  {
    width: 100%;
    padding: 0px;
    padding-bottom: 60px;
  }
}

a:link {
  color: black; 
  background-color: transparent; 
  text-decoration: underline;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.navbar {
  z-index: 1;
  font-family: 'Lyon';
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: .05rem solid;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 0;
}

.navbar a {
  color: black;
  font-family: 'Lyon';
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.navbar a:hover {
  color: black;
  font-family: 'Lyon';
  text-decoration: none;
}
.navbar li{
 list-style:none;
}

.navbar a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.navbar a.active {
  background-color: white;
  color: black;
  font-style: none;
  font-family: 'Lyon';
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a{
    display: none;
    padding-top: 6px;
  }
  .navbar .icon {
    float: right;
    display: block;
  }
  .navbar.responsive .icon {
    position: absolute;
    left: 10px;
    top: 8px;
  }
  .navbar.responsive li a {
    float;
    none;
    display: inline;
    text-align: center;
    margin: 4px;
  }
  .navbar.responsive li {
    float;
    none;
    text-align: center;
    margin: 6px 00px;
  }
  .navbar.responsive {
    align-content: center;
    flex-flow:column;
  }
  .navbar.responsive li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  .navbar.responsive li a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.margin {
  margin: 10px;
}

p {
   margin: 10px 0;
}

a img { 
  display: none;  
}

a:hover img { 
  display: block !important;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  max-height: 50%;
}

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-family: 'Lyon';
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

HTML

<ul class="navbar" id="myNavbar">
    <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a>
    <li><a href="#about" class="active">About</a></li>
    <li><a href="#lindsay">Lindsay</a></li>
    <li><a href="#contact">Branding</a></li>
    <li><a href="#contact">Photography</a></li>
    <li><a href="#contact">Instagram</a></li>
</ul>


<div class="margin"> 


<div class="row">


<div class="column">


<div class="container">
    <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
   <div class="overlay">
         <div class="text">Stipe Nobilo</div>
   </div>
 </div>


<div class="container">
      <p><p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
     <div class="overlay">
        <div class="text">Nils Frahm</div>
     </div>
</div>
</div>
<div class="column">
    <div class="container">
         <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
     <div class="overlay">
         <div class="text">Korean Barbecue</div></div></div>
              <div class="container">
                   <p><p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">
                 <div class="overlay">
                    <div class="text">Jenny Kee</div>
                 </div>
             </div>
         </div>
     </div>

JS

<script>
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>

Answer 1

You have margin provide under 800 media query.

Replace this from 60 to 0.

@media screen and (max-width: 800px) {
  .column  {
    width: 100%;
    padding: 0px;
    padding-bottom:0px;
  }
}

< script >
  function myFunction() {
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
      x.className += " responsive";
    } else {
      x.className = "navbar";
    }
  } <
  /script>

@font-face {
  font-family: "Lyon";
  src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
  src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg");
}

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 1100px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
    padding: 0px;
    padding-bottom: 0px;
  }
  .column:last-child .container:last-child {padding-bottom: 50px;}
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.navbar {
  z-index: 1;
  font-family: 'Lyon';
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: .05rem solid;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 0;
}

.navbar a {
  color: black;
  font-family: 'Lyon';
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.navbar a:hover {
  color: black;
  font-family: 'Lyon';
  text-decoration: none;
}

.navbar li {
  list-style: none;
}

.navbar a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.navbar a.active {
  background-color: white;
  color: black;
  font-style: none;
  font-family: 'Lyon';
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a {
    display: none;
    padding-top: 6px;
  }
  .navbar .icon {
    float: right;
    display: block;
  }
  .navbar.responsive .icon {
    position: absolute;
    left: 10px;
    top: 8px;
  }
  .navbar.responsive li a {
    float;
    none;
    display: inline;
    text-align: center;
    margin: 4px;
  }
  .navbar.responsive li {
    float;
    none;
    text-align: center;
    margin: 6px 00px;
  }
  .navbar.responsive {
    align-content: center;
    flex-flow: column;
  }
  .navbar.responsive li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  .navbar.responsive li a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.margin {
  margin: 10px;
}

p {
  margin: 10px 0;
}

a img {
  display: none;
}

a:hover img {
  display: block !important;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  max-height: 50%;
}

.container {
  position: relative;
  width: 100%;
  padding-bottom: 20px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-family: 'Lyon';
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<ul class="navbar" id="myNavbar">
  <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a>
  <li><a href="#about" class="active">About</a></li>
  <li><a href="#lindsay">Lindsay</a></li>
  <li><a href="#contact">Branding</a></li>
  <li><a href="#contact">Photography</a></li>
  <li><a href="#contact">Instagram</a></li>
</ul>


<div class="margin">


  <div class="row">


    <div class="column">


      <div class="container">


        <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">


          <div class="overlay">


            <div class="text">Stipe Nobilo</div>
          </div>
      </div>


      <div class="container">


        <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">


        <div class="overlay">


          <div class="text">Nils Frahm</div>
        </div>
      </div>


    </div>


    <div class="column">


      <div class="container">


        <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">


          <div class="overlay">


            <div class="text">Korean Barbecue</div>
          </div>
      </div>


      <div class="container">


        <img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image">


            <div class="overlay">


              <div class="text">Jenny Kee</div>
            </div>
      </div>


    </div>

  </div>

Answer 2

First of all this is causing the issue:

@media screen and (max-width: 800px) {
.column {
    width: 100%;
    padding-bottom: 60px;
}

change it to:

@media screen and (max-width: 800px) {
    .column {
        width: 100%;
        padding-bottom: 0px;
    }
}

then if all spaces between images should be the same set those here to 0 and see the difference:

@media screen and (max-width: 800px) {
    .column {
        padding: 0;
    }
    p {
        margin: 0;
    }
}

and add 5px to every image:

@media screen and (max-width: 800px) {
    .container {
        padding-bottom: 5px;
    }
}

Answer 3

You can remove white space by removing padding: 60px; from @media screen and (max-width: 800px).column in CSS. Also note that you had so many mistakes in your HTML code, you didn't close any of the <p> elements.

function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

@font-face {
  font-family: "Lyon";
  src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
  src:
    url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"),
    url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"),
    url("http://staging1.oakpark.co/wp-content/uploads/2019/08/Lyon-Text-Regular.svg") format("svg");
}

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 1100px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
    padding: 0px;
  }
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.navbar {
  z-index: 1;
  font-family: 'Lyon';
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: .05rem solid;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 0;
}

.navbar a {
  color: black;
  font-family: 'Lyon';
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.navbar a:hover {
  color: black;
  font-family: 'Lyon';
  text-decoration: none;
}

.navbar li {
  list-style: none;
}

.navbar a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.navbar a.active {
  background-color: white;
  color: black;
  font-style: none;
  font-family: 'Lyon';
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a {
    display: none;
    padding-top: 6px;
  }

  .navbar .icon {
    float: right;
    display: block;
  }

  .navbar.responsive .icon {
    position: absolute;
    left: 10px;
    top: 8px;
  }

  .navbar.responsive li a {
    float: none;
    display: inline;
    text-align: center;
    margin: 4px;
  }

  .navbar.responsive li {
    float: none;
    text-align: center;
    margin: 6px 00px;
  }

  .navbar.responsive {
    align-content: center;
    flex-flow: column;
  }

  .navbar.responsive li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

  .navbar.responsive li a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.margin {
  margin: 10px;
}

p {
  margin: 10px 0;
}

a img {
  display: none;
}

a:hover img {
  display: block !important;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  max-height: 50%;
}

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-family: 'Lyon';
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<ul class="navbar" id="myNavbar">
  <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a>
  <li><a href="#about" class="active">About</a></li>
  <li><a href="#lindsay">Lindsay</a></li>
  <li><a href="#contact">Branding</a></li>
  <li><a href="#contact">Photography</a></li>
  <li><a href="#contact">Instagram</a></li>
</ul>
<div class="margin">
  <div class="row">
    <div class="column">
      <div class="container">
        <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p>
        <div class="overlay">
          <div class="text">Stipe Nobilo</div>
        </div>
      </div>
      <div class="container">
        <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p>
        <div class="overlay">
          <div class="text">Nils Frahm</div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="container">
        <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p>
        <div class="overlay">
          <div class="text">Korean Barbecue</div>
        </div>
      </div>
      <div class="container">
        <p><img src="http://staging1.oakpark.co/wp-content/uploads/2019/06/Lindsay-Issue-No-2.jpg" style="width:100%" class="image"></p>
        <div class="overlay">
          <div class="text">Jenny Kee</div>
        </div>
      </div>
    </div>
  </div>