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 - HTML/CSS only

P
Julie 130

@jclegg31

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


Still working on centering DIVS but I think I'm getting better at it.

This challenge didn't look like it had a desktop and a mobile version? I see the info in the style guide says:

The designs were created to the following widths:

Mobile: 375px Desktop: 1440px

But both look mobile. Am I missing something? I only did the desktop version. Would love to know if I missed something. Thanks!

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. For this challenge there is no actually a mobile version, you just need to make it so the card still fits on a small screen size. I have a few suggestions.

  • You don't have to use max-width on the body, you'll need this later on when you have to use containers.
  • Margin on the body is not necessary, you can remove it
  • Change the background properties to this to fix the background image.
background: var(--clr-primary-paleblue)
    url(../images/pattern-background-desktop.svg) no-repeat;
    background-size: contain;

Marked as helpful

1

P
Julie 130

@jclegg31

Posted

@hitmorecode thank you for the feedback and the help! I updated the code and I'll get that back up to github here shortly.

Question for you, so why does FEM give you those parameters for the layout. That the designs were created with the mobile and desktop widths? I feel like they are a clue/guide to something and I never know when to use them. Or do I just ignore them?

Thanks!

0
hitmorecode 6,230

@hitmorecode

Posted

@jclegg31 Glad I could help. As for your question the width that they give us is, because there are challenges with more content than just a card. To make things look good we have to place the content inside a container and the container must have a width of 1440px on desktop and 375px on mobile.

So if you are doing a challenge with just one card, then you don't have to stick to this rule of max width 1440px. Just make sure that the card looks good on desktop and mobile

Marked as helpful

1
P
Julie 130

@jclegg31

Posted

@hitmorecode Thank you! That is super helpful!

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