Html Question posted in
Some basic documentation can be found here.

Html – having issue with the display flex option

here is a piece of code from my file ,im following a youtube tutorial to make this card using html and css but the cards dont displa next to eachother like it shows in the video, is it becuase my image is too big ??

my css code

<style>
      *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font-family: sans-serif;
      }

      body{
        background-color: #f0f0f0;
      }

      .card-container{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 100px;
      }
      .card{
        width: 325px;
        background: #f0f0f0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
        margin: 20px;
      }

      .card img{
         width: 100%;
         height: auto;
      }

      .card-content{
         padding: 16px;
      }

      .card-content h3 {
        font-size: 28px;
        margin-bottom: 8px;
      }

      .card-content p{
        color: #666;
        font-size: 15px;
        line-height: 1.3;
      }

      .card-content .btn{
          display: inline-block;
          padding: 8px 16px;
          background-color: #333;
          text-decoration: none;
          border-radius: 4px;
          margin-top: 16px;
          color: #fff;
      }

my html code

<div class="card-container">
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>
    </div>
    

    <div class="card-container">
      <div class="card">
        <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
        <div class="card-content">
          <h3>Nike Shoes</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
            praesentium similique, libero perspiciatis neque veniam perferendis
            deleniti, esse necessitatibus sed
          </p>
          <a href="" class="btn">Read More!</a>
        </div>
      </div>
    </div>

i used the display flex property and i was expecting my cards to display next to eachother but instead they are in a straight line with one being ontop of the other

Tags:

3

Answers


  1. 0

    While using flex, don’t use absolute widths, instead use flex-basis. This will enable you to manipulate the flex to the full extent. Also, you need to add 2 cards inside the card-container and not two card-container.

    * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  padding: 10px;
  display: flex;
  justify-content: center;
}

.card {
  margin: 10px;
  flex-basis: 50%;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgb(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
}
    <div class="card-container">
  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Logo_nike_principal.jpg" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium similique, libero perspiciatis neque veniam perferendis deleniti, esse necessitatibus sed
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>


  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Logo_nike_principal.jpg" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium similique, libero perspiciatis neque veniam perferendis deleniti, esse necessitatibus sed
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    To display cards, I would prefer you to use CSS-grids since they provide more flexibility on the number of cards to show according to screen size or add a proper gap between the cards.

    Here is a working example of your code using CSS-grids:

    * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(325px, 1fr));
  justify-content: center;
  gap: 20px;
  margin-top: 100px;
}

.card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgb(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
}
    <div class="card-container">
  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/20/KochSnowGif16_800x500_2.gif" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>

  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/20/KochSnowGif16_800x500_2.gif" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>

  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/20/KochSnowGif16_800x500_2.gif" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>

  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/20/KochSnowGif16_800x500_2.gif" alt="nikeshoes" class="card-image" />
    <div class="card-content">
      <h3>Nike Shoes</h3>
      <p>
        Lorem ipsum dolor...
      </p>
      <a href="" class="btn">Read More!</a>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    I think it’s a line of code that is missing in your css code. In the class ‘.card-container’, you might want to add this line :

    flex-direction: row;

    Also, in your html page, you want your cards to be in the same container. Right now, each of your cards are in a distinct container. If you want them to be in a row, you then have to put them in the same container. Your code should look something like that :

    <div class="card-container">
<div class="card">
  <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
  <div class="card-content">
    <h3>Nike Shoes</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
      praesentium similique, libero perspiciatis neque veniam perferendis
      deleniti, esse necessitatibus sed
    </p>
    <a href="" class="btn">Read More!</a>
  </div>
</div>

<div class="card">
  <img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
  <div class="card-content">
    <h3>Nike Shoes</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
      praesentium similique, libero perspiciatis neque veniam perferendis
      deleniti, esse necessitatibus sed
    </p>
    <a href="" class="btn">Read More!</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search