Html and Css Product preview card

Community feedback

• 

  Benjamin-odekina•60

  @Benjamin-odekinaPosted about 1 year ago

  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

  Marked as helpful

  0

  ---

  

  @calebakomaye•40

  @1a2-b3c4dPosted about 1 year ago

  @Benjamin-odekina Thanks alot 😊.

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  • 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 👍

  Marked as helpful

  0

  ---

  

  @calebakomaye•40

  @1a2-b3c4dPosted about 1 year ago

  @hitmorecode Thank you so much 🥰.

  0
• 

  Lawrence•180

  @lwrncgmbnPosted about 1 year ago

  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 😁

  Marked as helpful

  0

  ---

  

  @calebakomaye•40

  @1a2-b3c4dPosted about 1 year ago

  @lawrencegumabon Thank you 😊..

  0