product-preview-card

Community feedback

• 

  Chermann KING•430

  @Chermann-KINGPosted about 2 years ago

  Hi @monsda, here are my few suggestions you can consider adding to your code:

  • On your element <p id="perfume">P E R F U M E</p> , rather than separating the letters in hard you can in your css apply the property *letter-spacing * and assign the value that corresponds to the spacing you are interested in.

  • To your selector body you assigned an absolute position , which is not very practical in the context of this project and according to your html structure. Click here if you want to make a small revision related to the positioning of an element of the html page. Pssss: It's not your page that needs to be positioned but rather the product that you wrapped in a div with the class container

  • On the other hand, on your container you could apply an absolute position, while making sure to manage the top and the left of this container and then apply the transform property. this combination will fix the issue of centering the element in the page.

  here is a link to more detail related to the transform property and the translate method which responds well to your need.

  If you're interested, click here to see my solution to this challenge :)

  Good code to you ;)

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @monsda, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

  Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

  See the example below:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  ERIGO Chigozie Nicholas•650

  @nick335Posted about 2 years ago

  Hello, DASHDASH’S

  Great work on the challenge, to center the div you need to do:

  //remove the width and position styling in the body
  
  //from this
  body {
      background-color: hsl(30, 38%, 92%);
       width: 1440px;
      position: absolute;
      top: 20%;
      left: 35%; 
  }
  
  // to this
  
  body {
      background-color: hsl(30, 38%, 92%);
  }
  
  // after that you can position the container in 2 ways
  
  // 1, directly positioning the container  by adding this line of code to the container class
  
  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  // 2, wrapping the container in a div then styling the div, let's say we wrap it in a div we give a class name of center then we can style it like this
  .center{
     width: 100vw; // i.e width is equal to the width of the screen
     height: 100vh; // 1.e height is equal to the height of the screen
     display: flex;
     align-items: center;
      justify-content: center;
  }
  
  

  Hope this was helpful.

  Happy Coding!!

  Marked as helpful

  0