Home How can I move the product text under the product photos? I am only using HTML and CSS. As soon as I change it away from Flex, the images get too big

Questions

How can I move the product text under the product photos? I am only using HTML and CSS. As soon as I change it away from Flex, the images get too big

byMR

January 26, 2022

How can I move the product info under the product pics?
I am only using HTML and CSS. As soon as I change it away from Flex, the images get too big.

Please see what it looks like in the picture below.

html

    <div id="newProductsBox">
    
        <img class="productPic" src="img.jpg" alt="blue beanie">
        <div class="productInfo">
          <p class="productName">Beanie blue</p>
          <p class="productPrice">29,99 €</p>
          <p class="NEWicon">NEW</p>
        </div>

        <img class="productPic" src="img.jpg" alt="brown beanie">
        <div class="productInfo">
          <p class="productName">Beanie brown</p>
          <p class="productPrice">29,99 €</p>
          <p class="NEWicon">NEW</p>
        </div>

        <img class="productPic" src="img.jpg" alt="green beanie">
        <div class="productInfo">
          <p class="productName">Beanie green</p>
          <p class="productPrice">29,99 €</p>
          <p class="NEWicon">NEW</p>   
        </div>

        <img class="productPic" src="img.jpg" alt="black beanie">
        <div class="productInfo">
          <p class="productName">Beanie black</p>
          <p class="productPrice">29,99 €</p>
          <p class="NEWicon">NEW</p>
        </div>

    </div>

css

#newProductsBox {
  display: inline-flex;
  width: 100%;
  height: 170px;
}

img {
  .productPic {
    width: 100%;
    height: 100%;
  }
}

>Solution :

Bring the picture into productInfo class.

like this way:

 <div class="productInfo">
        <img class="productPic" src="img.png" alt="blue beanie">
          <p class="productName">Beanie blue</p>
          <p class="productPrice">29,99 €</p>
          <p class="NEWicon">NEW</p>
 </div>