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

Order summary component using css grid

Jem 30

@JemK-307

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


Feel free to give me the comment or feedback. The third challenge in my newbie front-end journey.

Community feedback

Dev Rathore 2,600

@GitHub-dev12345

Posted

Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

Use this code to increase the size of card : 😊 used this CSS Property in your card to increase and decrease the size of card:

1.In Card design CSS Code Used this:

transform : scale(0.8); this property decrease the size of card. 😉

large size for increase the number of scale & small size for decrease the number of scale

I hope you find this helpful

Marked as helpful

0

Jem 30

@JemK-307

Posted

@GitHub-dev12345 Hello. Thank you so much for your feedback. Your comment is really helpful, especially in center position style.

0
Dev Rathore 2,600

@GitHub-dev12345

Posted

Used for proper background image : 😊👌

In body tag used this CSS property: body{ background : url("./images/uesd image path") no-repeat; background position: top center; background size: 100% 50%; ( this is your choice check the image performance, and the gave the size percentage on your choice);

Marked as helpful

0
Jérémy 1,020

@jrmydix

Posted

Hi! Well done!

If this can help, I have a suggestion:

  • Fix accessibility issues: to do so, change your <h3> to <h1>.

If you have any questions feel free to ask, I'll try my best to help and answer! 🙂

Marked as helpful

0

Jem 30

@JemK-307

Posted

@jrmydix Thank you :D

1

@optimusprime202

Posted

Hey @JemK-307, This is the best ever.

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