Html and Css Product preview card

Firstly, beginning by adding padding to your text DIV below the image. Let's say 20px. Use @media screen and (min-width: 940px) to give conditional styles depending on the user screen sizes

• I added the picture element into your html (see html) and also add some css rules (see css). With the picture element you can tell a browser to load an image when it's at a certain width.
• All you have to do is create a media query and inside the media query set the rules that you want to change. For exampel change the flex-direction of the .container from column to row

html

<div class="container">
      
      <div class="image-holder">
  <picture>
    <source media="(min-width: 800px)" srcset="image-product-desktop.jpg">
    <source media="(min-width: 600px)" srcset="image-product-mobile.jpg">
      <img class="mobile" src="image-product-mobile.jpg" alt="Perfume Image">
<!--       <img class="desk" src="image-product-desktop.jpg" alt="desktop"> -->
  </picture>
  </div>
      <div class="content">
        <h1>Perfume</h1>
        <h2>
          Gabrielle Essence Eau <br>
          De Parfum
        </h2>
        <p>
          A floral, solar, and voluptuous interpretation composed by Olivier
          Polge, Perfumer-Creator for the House of CHANEL.
        </p>
        <div class="price">
          <p id="tag">$149.99</p>
          <p id="del">$169.99</p>
        </div>
        <div class="button">
          <button>
            <img src="icon-cart.svg" alt="Cart Icon">
            <p>Add to Cart</p>
          </button>
        </div>

        <div class="attribution">
          Challenge by
          <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Caleb Akomaye</a>.
        </div>
      </div>
      </div>

css

@media only screen and (min-width: 800px) {
  .container {
    flex-direction: row;
    width: 600px;
    height: 400px;
  }
  
  .image-holder {
    width: 300px;
    height: 400px;
  }
  
  .image-holder img {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 300px;
  }
}

This is just an example on how you can make it responsive, there are still some bugs that need to be fixed. See if you can manage to fix it, if not feel free to ask

KEEP CODING 👍

Hello there 😁

To make that work in a desktop view, you can use display:grid; or display:flex for that. There are lots of tutorials on YouTube, or you can read different documentations to learn it. Also, to put your main container in the middle, you can use display: flex; justify-content:center; align-items:center min-height: 100vh;.

Happy Coding 😁