CODEWITHSUNDEEP
htmlcss
learningtoanimate
learningtoanimate

Reputation: 934

Padding elements of a fixed width

I'm creating an adaptable row of images that will break on to another row if needed when there are too many images for the size. At the moment there's 4 in a row on desktop and 2 in a row on mobile.

All of the images are set to 25% or 50% in width. I want to have them spaced out slightly and evenly.

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
<div class="images-row">

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

</div>

This works fine and all of the images are touching. I feel like some space would look better visually. Is the best approach to pad the width of the main container? I've tried making the images smaller, like this;

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
<div class="images-row">

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

</div>

Which looks fine on desktop but the bottom of the images still touches the top of the ones below them. Doing something like this:

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
.image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.image-padding {
  padding: 5px
}

.image {
  width: 100%
}
<div class="images-row">

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

</div>

Works fine for padding also but runs into the issue that they don't then stack on mobile. I feel like I'm close but I'm not sure how to get this to work.

EDIT

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.image-padding {
  padding: 5px
}

.image {
  width: 100%
}
<div class="images-row">

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

</div>

<style>

</style>

Upvotes: 2

Views: 264

Answers (2)

Jonas Grumann
Jonas Grumann

Reputation: 10776

This would be a perfect case to use a ready-made grid system, there's many out there you could use. That being said, you were pretty close but your html is a bit too complex for what you're trying to accomplish. My guess is that you're fighting against how the box-model works: if you add padding, the container gets wider. To avoid that I usually use ´box-siting: border-box´, that way the padding goes inside the container. It just makes everything much more logic. In all of my projects I start with:

* {box-sizing: border-box;}

As for your specific case, here's my solution, as you can see I simplified your html a little and change the css for it:

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.image-container {
  width: 25%;
  padding: 5px;
  box-sizing: border-box;
}


@media only screen and (max-width: 500px) {
  .image-container {
    width: 50%;
    
  }
}

.image {
  width: 100%;
  display: block;
}
<div class="images-row">

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

</div>

Upvotes: 1

Ben
Ben

Reputation: 624

Your code can really be simplified, you don't need all those containers. By keeping it simple, it will also be clearer to identify problems.

.images-row {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

img {
    width: calc(25% - 10px);
}

@media only screen and (max-device-width: 500px) {
    img {
        width: calc(50% - 10px);
    }
}
<div class="images-row">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
</div>

For mobile, the problem may come from @media only screen and (max-device-width: 500px): there are some more adapted to detect mobile, @media (orientation: portrait) for instance.

Upvotes: 0

Related Questions