Skip to content
Submitted about 2 years ago

HTML/CSS - Product preview card component (Responsive)

Roxanne•260
@rox-stahl
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Project 1: What did you find difficult while building the project? • I was shocked this was under "newbie" and did a lot of reference checks! MDN is my new best friend :D
-adding two images that are set to two separate media queries. Questions about window sizes for browser, I wanted to set for smaller? -adding an SVG to a button with text - spacing is not correct.
How do I get the spacing between the icon and the text?

Which areas of your code are you unsure of? • Umm, it looks good, but I'm sure there are easier ways to go about it. Maybe some refactoring or using a different method I haven't explored yet...suggestions?

Do you have any questions about best practices? • Best ways to decide flex or grid?

Community feedback

  • Abdeljalil wahib•80
    @Ajwahib95Posted about 2 years ago

    Hey Roxanne, great job on this project!

      In terms of the button layout I added the following:

  #cart {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
   }

    using flexbox gives you more control over the elements and their positioning. I noticed that the svg icon and the text were not properly aligned, so I used justify-content to align them horizontally and align-items for vertical alignment, as for the spacing between the svg and the text, I used the gap property. I hope you find this helpful!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord