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 HTML & CSS FlexBox Responsive Design

@hanzala-bhutto

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


I find it daunting to set font family, sizes, colour, weight etc

Would appreciate some helpful suggestions to quickly deal with font settings which make the websites look pleasing

Community feedback

Swing95 180

@Swing95

Posted

Hi,

for font settings etc in general, you can use:

  • { color: xyz; font-family: xyz; font-weight: xyz; }

This will apply to everything

When talking about *, try this:

  • { margin: 0; padding: 0; box-sizing: border-box; }

It will make your life much easier.

Additionally, you should use rem in your code for setting font sizes and you can set your base rem unit in html

html { font-size: 15px; }

Then 1 rem will be 15px

Check here https://github.com/Swing95/order-summary-component-main

Br David

Marked as helpful

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