Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

I unable to solve my problem please help me “.lightbox should cover entire viewport” how to solve this please help me

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox Viewer</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="gallery">
        <img class="gallery-item" onclick="renderIt(this)"
            src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="rocks">
        <img class="gallery-item" onclick="renderIt(this)"
            src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="hource-cart">
        <img class="gallery-item" onclick="renderIt(this)"
            src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="trees">
    </div>

    <div class="lightbox" >
        <button id="close-btn" class="close-btn" onclick="hideLightBox()">&times;</button>
        <img id="lightbox-image" src="https://cdn.freecodecamp.org/curriculum/labs/storm.jpg">
    </div>


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

</html>

/* file: styles.css */
body {
  background-color: antiquewhite;
  padding:0;
  margin:0;
}
.lightbox {
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  /* height: 15px; */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(122, 122, 122, 0.705);
  display: none;
}
.lightbox img{
  object-fit:contain;
  width:auto;
  height:90%;
}


.lightbox .close-btn {
  position: absolute;
  font-size: 50px;
  width: 80px;
  height: 80px;
  top: 15px;
  right: 15px;
}
.gallery{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  height:100%;
}
.gallery img{
  width:50%;
  max-width:225px;
  display:flex;
  flex-wrap:wrap;
}


/* file: script.js */
let lightbox_image = document.querySelector("#lightbox-image");
let lightbox = document.querySelector(".lightbox");

function showLightBox(src) {
  lightbox.style.display = "flex";
  console.log(src.toString());
  lightbox_image.src = src.toString();
}

function hideLightBox() {
  lightbox.style.display = "none";
}

function renderIt(thumbnailImg) {
  let newGeneratedURL = thumbnailImg.src.replace("-thumbnail", "");
  showLightBox(newGeneratedURL);
}

lightbox.addEventListener("click", (e) => {
  if (e.target.nodeName == "DIV") {
    hideLightBox();
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

Screenshot 2025-05-31 191621
Screenshot 2025-05-31 191621783×194 19.1 KB

2

Your solution is in user stories number 7,
Understand it carefully.