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 with SASS

#sass/scss
Fat 850

@Fahatmah

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


Hello Everyone! This is my second attempt but with SASS making more my self less frustrated and efficient while I was making this.

Happy Testing!

Community feedback

Illyaas 680

@Illyaas4Show

Posted

This is amazing! How do you get your solution so close to the design? What browser do you use?

There is only one difference, you should make the card smaller.

0

Fat 850

@Fahatmah

Posted

@Illyaas4Show Honestly, I just aligned it to each elements that they have next to each other so that it will be almost aligned to one next to each other 😅😊 And when it comes to the font-size, I usually test it before I write the markup. Lastly I also make sure that every elements have the exact same (not exactly because pixel perfect isn't my goal) spaces they should have.

And I shouldn't increase the sizes in the desktop view 😄

That's all! Thank you!

0
Fat 850

@Fahatmah

Posted

@Illyaas4Show For the browser I use, it's only chrome and when I am finished on the challenge, I test it in other browsers such as Microsoft Edge and Firefox.

0
Illyaas 680

@Illyaas4Show

Posted

@Fahatmah ok thx. Basically it is you just eying it but with great detail lol

1

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