Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card Component

@awolf23

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Okay, my second project. I had some difficulties, especially with the gaps in the "card" section. I know the button is not great, the svg is not centered along with the "Add to Cart". Any tips on that are welcome, as well as other tips in general! Cheers!

Community feedback

IRVINE MESA 1,855

@DrMESAZIM

Posted

hi AWOLF23 your solution is not mobile responsive this can be solved by making use of media queries and flexbox properties

If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

Marked as helpful

0

@awolf23

Posted

@DrMESAZIM Many thanks you for your answer, Irvine. If you look at style.css, you can see that the media query is there, and if you go into responsive mode in the console, you can see that the site is in responsive mode once reaches 375px as requested. But in fact when I open the site on my phone, the site doesn't adjust to it. I have no idea why. Help would be appreciated!

0
IRVINE MESA 1,855

@DrMESAZIM

Posted

@awolf23 yes i will show it to you in best simplified way in my live stream on this link

https://youtube.com/live/L6WTd7HRTMM?feature=share

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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