Skip to content
Submitted 4 months ago

Responsive e-commerce-page with vanilla CSS&JS

nj93777•240
@nj93777
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned a lot about JavaScript. This felt more advanced than a level 3 challange, probably because there were so many small details to consider. Once again, I did things without proper planning, which is likely why it felt more difficult than it actually was. So, next time, I'll make sure to plan before starting.

What challenges did you encounter, and how did you overcome them?

I need to improve at positioning elements, and dealing with responsiveness was challenging. I focused a lot on functionalities, and towards the end, the layout became difficult to manage. These issues can also be addressed with better planning.

Community feedback

  • Krushna Sinnarkar•1,100
    @krushnasinnarkarPosted 4 months ago

    Hi @nj93777,

    Congratulations on successfully completing the challenge!

    Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

    1. Large Gap Between Sections:

      • There is a large gap between the image section and the aside. You can solve this issue by removing the flex: 1 property from the main section element.
      • Also, change the justify-content: space-between; property to justify-content: center;. This will prevent the image section from growing and keep both sections centered.

    2. Stretched Layout on Large Screens:

      • Add max-width: 1440px; to the body element to avoid stretching on large screens.
      • Use margin: 0 auto; to keep the content centered.

    3. Carousel Button Alignment:

      • The carousel buttons are not properly aligned for screen sizes between 900px to 650px. Adjust their left and right properties to ensure they are perfectly aligned within this range.

    I hope you find this helpful.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
    0
    nj93777•240
    @nj93777Posted 4 months ago

    @krushnasinnarkar

    It was really helpful! I made the changes.

    1

Please log in to post a comment

Log in with GitHub

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