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

HTML5 - CSS custom properties - Flexbox - Angular - bootstrap

Karim Aymanβ€’ 320

@KarimAyman97

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

Swagata Royβ€’ 60

@swagataroy30

Posted

My suggestions would be:-

  1. When the Lightbox overlay appears , the contents of it are placed far for each other(the large image, the thumbnails and the close icon) - the gap between them should be reduced.
  2. The next icon the Lightbox overlay is not placed correctly.
  3. In mobile view you can increase the cart icon size. πŸ˜„πŸ‘

Marked as helpful

0

Karim Aymanβ€’ 320

@KarimAyman97

Posted

@swagataroy30 You are right, thank you for your suggestion, I will amend it

0
S MD sulemanβ€’ 3,530

@sulemaan7070

Posted

hey Karim AymanπŸ˜„, congratulations on completing the challenge... here are a few tips to make your site better.

1.Firstly when I am deleting the items from the cart.. the checkout button still stays there in the cart list.. you can make it disappear along with items.

2.There seems to be some problem with the mobile version.. the page is not opening.

3.You can use the logo provided in the images folder.

Hope that helps,happy codingπŸ”₯πŸ”₯

0

@VCarames

Posted

Hello @sulemaan7070,

As a friendly reminder, please avoid the following as it is against FEM’s policy:

  • "If you find my comment helpful please mark it as helpful.”

Which can result in your getting your account flagged and banned temporarily/permanently.

"Ask people to mark your comment as helpful β€” A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

The goal of providing feedback is to help individuals learn and grow as developers; not about gaining points.

Thank you for contributing to the FEM community!

Happy Coding! πŸŽ†πŸŽŠπŸͺ…

Marked as helpful

1
Karim Aymanβ€’ 320

@KarimAyman97

Posted

@sulemaan7070 thank you for your feedback it means a lot to me

0
S MD sulemanβ€’ 3,530

@sulemaan7070

Posted

@vcarames noted and I removed such text from all of my comments!!.. Thank you for letting me know

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