How to remove white space between div with use flexbox

Question

I have a problem with white space between div.

It's my project: enter image description here

and I need to do as below enter image description here

my part of code: I tried to set height 100% on parent element, but it didn't solve my problem.

I want to use flexbox in this project. Is there anyone able to help me with the solution of this?

import "../scss/main.scss";
import 'regenerator-runtime/runtime';

let page = 1;
let limit = 5;
let counter = 0;


const gallery = document.querySelector('.gallery');
const heading = document.querySelector('.heading');
const article = document.createElement('article');
const fullSizeImage = document.createElement('section')
const btnNextJsonImages = document.querySelector('.btn-nextJson-images');


const loadImagesJson = () => {
    page++;
    getImages();
};

btnNextJsonImages.addEventListener('click', loadImagesJson);

const getImages = () => {
    const url = `http://localhost:3000/info/?_page=${page}&_limit=${limit}`
    fetch(url)
        .then((res) => {
            return res.json()
        })
        .then(data => showImages(data))
        .catch(err => console.log(err))
};


const showImages = (images) => {
    if (images.length === 0) {
        btnNextJsonImages.setAttribute('disabled', true);
    } else {
        images.forEach(image => {
            const { name } = image.name;
            const { thumbnail } = image.images;
            const { nameArtist } = image.artist.name;
            const item = document.createElement('div');
            item.className = 'gallery-image';
            item.dataset.id = counter;
            item.innerHTML = `
            <img src="${thumbnail}" /> 
            <h1>${image.name}</h1>
            <p>${image.artist.name}</p> 
            `;
            counter++;
            gallery.appendChild(item);
            item.addEventListener('click', () => imageDetail(image))
        });
    }
}

   

.heading,.gallery,.article-information,.full-size-image{
width: calc(100%-10%);
min-height: 1px;
margin: 0 7%;


@media screen and (min-width:780px){
  width: 730px;
  margin: 0 auto;
}

@media screen and (min-width:1100px){
  width: 1000px;
  margin: 0 auto;
}


.gallery {
  height: 100%;
    @media screen and (min-width:780px){
      display:flex;
      justify-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      }
  
.gallery-image{
    margin-top: 24px;
    position: relative;
    height: 100%;
    width: 100%;
  @media screen and (min-width:780px){
    flex:1;
    width:44%;
    margin-right: 40px;
    
  }
 
  h1{
    position:absolute;
    left: 6%;
    bottom:20%;
    font-family: $libre-font;
    color:$white-color;
    font-size: 22px;
    line-height: 30px;
    font-weight: normal;
    width: 70%;
    
  }
  p{
    position:absolute;
    left: 6%;
    bottom: 12%;
    font-family: $libre-font;
    color:$white-color;
    font-weight:normal;
    font-size: 13px;
    line-height: 16px;
    width: 70%;
    opacity: 0.75;
  }
}
}

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>gallery-slide</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"
    rel="stylesheet" />
</head>

<body>
  <header class='heading'>
    <div>
      <p>galleria.</p>
      <p>start slideshow</p>
    </div>
  </header>
  <hr>

  <button class="btn-nextJson-images">Załaduj kolejne zdjęcia</button>

  <main class="gallery">


  </main>
  <!-- <article> -- 
    <img />
    <h1>

    </h1>
    <p></p>
    <footer>
      <button>prev img</button>
      <button>next img</button>
    </footer> 
   </article> -->

  <script src="index.js"></script>
</body>

</html>

How to remove white space between div with use flexbox

0 Answers0