Product Preview Card using HTML and CSS

Community feedback

• 

  Purnima Kumar•390

  @purnimakumarrPosted over 2 years ago

  Hey Pooja, There are two things that you can do to decide the right breakpoints for media queries:-

  1. Based on device: This approach basically says to add a break point for every different device (for example, laptops, tablets, mobiles with larger screens, mobiles with smaller screens etc.). You can see different device sizes in the chrome browser when you inspect a website and go to the toggle device toolbar.

  2. Based on website content: This is approach is like hit and trial, you test your website at different lengths and at every point the layout starts to mess up, you add a media query there.

  You can read more about how to set breakpoints in this article at BrowserStack

  I would advice to keep the media query breakpints at a gap of 150-200 px because if you have to add a media query almost at every point then the layout isn't very strong.

  As this is a short and simple layout, you can build the layout according to the desktop design add one breakpoint at 445 px for mobile devices.

  Also, if you are just starting out it would be good for to only focus on desktop layout & mobile layout (only add media queries for those) and when you feel comfortable, you can make the layout responsive for all different types of devices.

  One more thing, I saw 2 accessibility issues in your solution report. It's because you haven't used any HTML5 landmarks in the code, you can solve this issue by wrapping the <div class="card"></div> component in a <main></main> tag.

  Marked as helpful

  1

  ---

  

  Pooja Chavan•30

  @pooja201095Posted over 2 years ago

  @purnimakumarr Hi Purnima, Thank you for the such descriptive clear response. The browserStack article was definitely helpful. 👍😊

  1
• 

  Shams Wali Sowmo•130

  @Sowmo0509Posted over 2 years ago

  Hi Pooja, There are some beginner level mistakes you've made and I'm here to help. Take a look at your–

  1. "Gabrielle Essence Eau De Parfum" font is not matched. Check the style-guide file from your Starter Files.
  2. Add to Cart button has not cursor: pointer;
  3. The sale price spacing is not correct on mobile layout.
  4. Image is stretched out on mobile devices, try using object-fit: cover;

  1

  ---

  

  Pooja Chavan•30

  @pooja201095Posted over 2 years ago

  @Sowmo0509 Hi Shams, Thank you for the response. I have fixed the issue. For sale price spacing i am currently using a flex gap. Is that the right way or would you suggest something better.

  0

  

  Shams Wali Sowmo•130

  @Sowmo0509Posted over 2 years ago

  @pooja201095 Simply use margin-right or in flex just set flex-basis, it'll work!

  1