Responsive Product Preview Card using HTML & CSS

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Kounik, congratulations for your new solution!

  You did good building this solution with flex, about the best practices somethings should have in mind is to try to write the minimum of code you can, you can do that removing unnecessary divs, using tags like picture to save time displaying different images depeing of device without need to use media queries.

  I think the easiest way to build this challenge is using grid, also the code is more clean, here's how I build mine.To build this component with 2 columns all you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 1000px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 500px).

  If you want to go beyond, in Google Chrome theres a tool in dev tools called lighthouse that gives you a fulll report saying how is the page performance and how can you improve it.

  👋 I hope this helps you and happy coding!

  11

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Kounik, well done completing your second challenge, and I think you've done a good job here on the whole. About your question, I would say there are few things you can try:

  1. Mobile-first approach: This mean starting your code by building out the mobile version. I see that you have the desktop version first; you can try the mobile first next time, and you may find that you won't need to write as much code for the media query!

  2. Whenever possible, try to use responsive width/height properties first instead of fixed widths/heights. Right now when I resize the browser to make it smaller, the desktop view is not responsive (as in, its width is fixed can cannot be changed). You can try using max-width instead to make it responsive. Also, I see you using rem units, and I think that's great! That's also something I consider good practice ((I use it for nearly everything) as pixels are fixed but rem can be scaled based on user preference.

  3. It'd be good to add some normalize/reset CSS rules at the top of the style sheet to override some of the browser's default styles. Here are some you can try:

     * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
     
      img {
        max-width: 100%;
        display: block  // you can also just add this to the img individually instead of globally
      }  
     

  4. Lastly, in the text area, I see that you got margin set on every element, which can be a bit tedious to change if you do need to change the values. What you can try next time is to give the entire content container a padding (try 1 or 1.5rem) and then if you need to, add top or bottom margin for the elements for spacing.

  I think you did well on the whole, so keep going! 🙂

  01

  Marked as helpful