Perfume Card Component Using Scss

Community feedback

• 

  Mohd Gulam Ansari•210

  @gulamansari57181Posted over 2 years ago

  Ya also take care of the typography. Main heading in the design is rendering in three lines whereas in your design it is rendering in two line only. Tip : Make sure to use responsive font-size as per the viewport. So you can use (e.g. rem ,em) for typography. Note: use rem : for font-size and use em: for margin and padding for better control and code readability.

  👋 Happy Coding !!!👋

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Nico, congratulations for your new solution!

  To have more control over the product images you use <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  Here;s a guide for this tag if you don't know it yet: https://www.w3schools.com/tags/tag_picture.asp

  For the column with the text content you can use justify-content: space-around; to use a uniform spacing between elements, or you use padding-bottom / gap to create these gaps.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Nico Arifin•260

  @N1CoderPosted over 2 years ago

  @correlucas Thank you for your feedback, I learned something new about picture tag 😁

  1