Perfume Branding

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Kixzy, congratulations finishing the challenge!

  Apart from what Lucas said, I would add another fix, if you check the files that you downloaded for this project, you will se that you have 2 images, one for desktop and other for mobile, you can place both of them in your html, instead of using only the img tag, you can use the <picture></picture> tag with 2 <source> tags, with this you can set both images on your project, and use them depending on the size of the screen, its a good to learn thing trust me!.

  If you wanna learn more about this tag you can check this video from Kevin Powell were he explains how this works, and also this w3s article and examples about it!

  Hope my feedback helps you, and keep going with those challenges!

  Marked as helpful

  1

  ---

  

  Kixzy•100

  @KixzyPosted about 2 years ago

  @DavidMorgade Firstly, I am so sorry I am replying to this so late, Javascript has kept me stuck in a phase. This is really helpful. I had always been wondering why the challenges come with two images; the mobile and desktop images. In my mind, it always can be easily adjusted to taste with width and height. Today I have learned a better way to better approach my next challenge. Thank you much.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Kixzy, congratulations for your new solution!

  Your solution seems great and also the design for component. But you've missed two important things, the border-radius for all the component corners and the vertical alignment.

  To give the container a vertical alignment add min-height: 100vh to make it have a height size of 100% of viewport height and make the container align to this height with flexbox. See he code below:

  .bg-lightCream {
      min-height: 100vh;
      --tw-bg-opacity: 1;
      background-color: hsl(30 38% 92% / var(--tw-bg-opacity));
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Kixzy•100

  @KixzyPosted about 2 years ago

  @correlucas you're always helpful, thank you.

  1

  

  Kixzy•100

  @KixzyPosted about 2 years ago

  @correlucas Please could help me understand how to properly make my insertion of a font-family work with Tailwindcss. I am not sure how to say this but, I dont seem to know how to change my font family using Tailwind. When I do, it just would not work. Please I will be delighted if you would take a time out to help me with explanations on how to make it work or possibly refer me to a video that will help me understand it better. Thank you.

  0