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

Responsive order summary card with Flex box

@Mahmoudamin11

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback please and any advice to reduce the code : )

Community feedback

@eddybpro

Posted

Hi, Mahmoudamin11

Congratulation on finishing this challenge, I hope it was fun.

Here are some improvements that might be helpful:

  • CSS code:
@media (max-width: 430px)
main {
/*I think its better to change the value of 'width' to 95%*/
width: 95%;
}

It's more professional to add classes to your HTML elements, That makes it easy to identify the element easily in CSS. And you may need to do some tasks later with the class in JS (when the project gets more complex)

  • Example:
<button class='payment-btn'>Proceed to Payment</button>

You may need to add some hover effect to the button:

.payment-btn:hover{
/*some code*/
}

Tip

Use relative values rem em instead of absolute values px that help make your website responsive in different screen sizes.

Good luck in your jouney

Marked as helpful

0

@Mahmoudamin11

Posted

@eddybpro thank you for your feedback but i added hover to the button click on preview website better and iamn't interested in adding too much classes cause it's sometimes time-wasting like (i have only one button so no need for class) yeah i used rem and em in the code and also px again thank you for ur helpful feedback

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