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  src="img.jpg" alt="blue beanie">
        <div >
          <p >Beanie blue</p>
          <p >29,99 €</p>
          <p >NEW</p>
        </div>

        <img  src="img.jpg" alt="brown beanie">
        <div >
          <p >Beanie brown</p>
          <p >29,99 €</p>
          <p >NEW</p>
        </div>

        <img  src="img.jpg" alt="green beanie">
        <div >
          <p >Beanie green</p>
          <p >29,99 €</p>
          <p >NEW</p>   
        </div>

        <img  src="img.jpg" alt="black beanie">
        <div >
          <p >Beanie black</p>
          <p >29,99 €</p>
          <p >NEW</p>
        </div>

    </div>

css

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

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

CodePudding user response：

Bring the picture into productInfo class.

like this way:

 <div >
        <img  src="img.png" alt="blue beanie">
          <p >Beanie blue</p>
          <p >29,99 €</p>
          <p >NEW</p>
 </div>

CodePudding user response：

Brought the picture into productInfo class and then resized the images.