如何消除响应列之间的空白？

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 (ie 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>