Question 377742 in CSS Question posted in
Some basic documentation can be found here.

CSS image gallery isn't centering well

I made a website using HTML and CSS which can be seen here.
It works but as you can see, the image gallery has some spacing issues.
the first space is bigger than the other ones

As you can see, the space from the first image to the other image is inconsistent.

This is a snippet of my CSS:

.gallery {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    display: inline-block;
    border: 3px solid #8f8f8f;
    margin: 5px;
    border-radius: 15px;
    background-color: #29313d;
}
.gallery description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 3px solid #ccc;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.gallery img {
    width: 200px;
    height: 100px;
    border-radius: 12.5px;
    object-fit: cover;
}

That’s the code that causes that inconsistency. How do I fix it?

Tags:

2

Answers


  1. 0

    The space you are referring to is called margin. The images’ widths in .gallery are just set to 200. There is no unit here, so it is an error and is ignored in CSS by default.

    So, however big the images are in your gallery, the cards will just resize to that image’s default size. In this case, all idk.png images are 1280 x 720 pixels (This is a 16:9 ratio). The one image on the left is a different size. It is 768 x 432 pixels (This is also a 16:9 ratio).

    The only difference is, that in CSS, images’ margins are determined by their size. If an image is scaled down, their margins will also be scaled down. This is why the margins are smaller between all idk.png images. To fix this problem, simply set a specific width of all of the images (not just the "idk.png" images).

    <!DOCTYPE html>
<html>
<head>
  <style>
    a {
      color: #b5b5b5;
      text-decoration: none;
      font-weight: 750;
    }
  </style>
  <title>M100</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
  <style>
    @font-face {
      font-family: myFont;
      src: url(Nunito-SemiBold.ttf);
    }
    
    * {
      margin: 0;
      padding: 0;
    }
    
    .containter {
      height: 100vh;
      width: 100%;
      background-position: center;
      background-size: cover;
      box-sizing: border-box;
      position: relative;
    }
    
    .navbar {
      width: 95%;
      height: 15vh;
      margin: auto;
      display: flex;
      align-items: center;
    }
    
    nav {
      width: 90%;
      text-align: center;
      background-color: #323a48;
      flex: 1;
      padding-left: 60px;
      padding: 15px;
      border-radius: 100vh;
    }
    
    nav ul li {
      display: inline-block;
      list-style: none;
      margin: 0px 20px;
    }
    
    nav ul li a {
      font-family: "Nunito", sans-serif;
      font-weight: 650;
      font-size: 20px;
      text-decoration: none;
      color: #b5b5b5;
    }
    
    h1 {
      text-decoration: none;
      font-size: 60px;
      font-weight: 500;
      margin-top: 24px;
      margin-bottom: 15px;
      color: #b5b5b5;
    }
    
    h2 {
      text-decoration: none;
      font-size: 30px;
      font-weight: 500;
      margin-top: 24px;
      margin-bottom: 15px;
      color: #b5b5b5;
    }
    
    p {
      font-size: 20px;
      color: #b5b5b5;
    }
    
    .content {
      font-family: "Nunito", sans-serif;
      margin-left: 10%;
      margin-top: 10%;
    }
    
    .contentCenter {
      font-family: "Nunito", sans-serif;
      margin-left: 0%;
      margin-top: 5%;
      text-align: center;
    }
    
    .content .btn {
      display: inline-block;
      background: color
    }
    
    .btn {
      display: inline-block;
      color: #ffff;
      font-family: "Nunito", sans-serif;
      font-size: 23.5px;
      background: #1E90FF;
      width: 160px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      border-radius: 15px;
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.0);
      -webkit-transition-duration: 0.25s;
      transition-duration: 0.25s;
    }
    
    .btn:hover,
    .btn:focus,
    .btn:active {
      box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    
    body {
      background-color: #1b2029;
    }
    
    .gallery {
      -webkit-transition-duration: 0.25s;
      transition-duration: 0.25s;
      display: inline-block;
      border: 3px solid #8f8f8f;
      margin: 5px;
      border-radius: 15px;
      background-color: #29313d;
    }
    
    .gallery description {
      padding: 10px;
      text-align: center;
    }
    
    .gallery:hover {
      border: 3px solid #ccc;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    
    .gallery img {
      width: 200px;
      height: 100px;
      border-radius: 12.5px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="containter">
    <div class="navbar">
      <nav>
        <ul>
          <li><a href=".">🏠 Home</a></li>
          <li><a href="./projects">đŸ“Ļ Projects</a></li>
          <li><a href="./resume">📄 Resume</a></li>
          <li><a href="./discord">đŸ’Ŧ Discord Server</a></li>
          <li><a href="https://www.roblox.com/groups/16658958">🕹ī¸ M100 Studios</a></li>
        </ul>
      </nav>
    </div>
    <div class="contentCenter">
      <center>
        <h1>Resume</h1>
        <p>So yeah I worked on some things, in case you want to hire me.
          <img src="assets/images/cool-guy.png" width="25" height="25">
        </p>
        <br>
        <p>Any other projects can be found on my <a href="https://scratch.mit.edu/users/Micamaster100">Scratch</a> and <a href="github.com/Micamaster100">Github</a></p>
        <br>
        <h2>Games</h2>
      </center>

      <div class="gallery">
        <a target="_blank" href="https://www.roblox.com/games/16955585161">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/obbydoxxedthing.png">
          <div class="description">
            Obby but if you die...
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="about:blank">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            In Development...
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="about:blank">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            In Development...
          </div>
        </a>
      </div>


      <h2>Contributions to Other Games</h2>
      </center>

      <div class="gallery">
        <a target="_blank" href="">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/gemachagraphic.png">
          <div class="description">
            In Development
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="https://create.roblox.com/talent/creators/3158841538">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            Your Game Here
          </div>
        </a>
      </div>
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    I think you missing the .description class along with the width: 200 that I see you already fixed is what breaking it. You should make the following update and it should work. Add a period to the description class.

    
 .gallery .description {
      padding: 10px;
      text-align: center;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search