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 Component Using HTML CSS and Flexbox

Dizzy_Sloth• 50

@TotallySly

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 know the colour on the hover states is incorrect. But I just could not figure out the correct colour scheme to use.

Also, I am a bit concerned that the sizing of the design. It is massively different to the design brief. In the real world, would this be a major concern? If so, are there any websites that can scale images and give the correct pixels for my future design???

Again, thank you for all that will review my code and give feedback.

Community feedback

P
Fluffy Kas• 7,735

@FluffyKas

Posted

Heyo,

It's not a bad start but there's a few issues going on here ^^

  1. Using vw isn't a great solution for defining a width, at least not in itself. Your max-width should always be a fixed height, 30rem/400px for example (or whatever fits this challenge) . If this doesn't alone solve your problems, you can combine it with a width: 90% (just an example, again), the two together will take care of your widths on most screen sizes ^^

  2. Don't give the body a height, use min-height instead.

  3. Alt texts shouldn't contain the word image, picture etc, using an img element is self-explanatory. It's just supposed to be a text description for those who can't see the image, so "A lady listening to music via headphones" is perfect ^^

  4. Giving your images a display: block, max-width: 100% and height: auto will make sure they resize in a responsive way, you'll rarely ever need more than this. Your size problems right now come from other sources, like the widths on your containers.

  5. As for the button hover, I'd just keep the same colour and lower to opacity to like 0.8 on hover. Lowering opacity is frequently used for hovers, so just keep this in mind if you feel like you're struggling to come up with the "right colour".

  6. The box-shadow on the button also seems a bit off, try this instead: box-shadow: 0 15px 20px 0 hsla(245, 75%, 52%, .25). Reducing opacity on the colour is a great trick here too, if you'd like to make more realistic box-shadows.

Marked as helpful

3

Dizzy_Sloth• 50

@TotallySly

Posted

@FluffyKas

Thank you for your help and feedback.

That is some great advice. I will play around with the code now! But this advice is just what I am looking for! Thank you so much.

0
Byron• 2,180

@byronbyron

Posted

Hey @TotallySly, it looks alright!

For the button hover, I used a slight opacity instead of the background colour, something like:

.payment--container button:hover,
.payment--container button:focus {
    opacity: 0.75;
}

For the sizing thing, it depends on how picky your client is in the real world 😅. When I want to get the image size from the design image, I usually open it up in Preview (mac) and drag a square around the image to get the dimensions.

For your Order Component, it looks like your background images aren't coming through. Something like this should help I think (feel free to play around with the background-size values):

body {
    ...
    background: url(images/pattern-background-mobile.svg) no-repeat, top center hsl(225, 100%, 94%);
    background-size: 100% 194px;
}

@media screen and (min-width: 908px) {
    body {
        background-image: url(images/pattern-background-desktop.svg);
        background-size: contain;
    }

Marked as helpful

1

Dizzy_Sloth• 50

@TotallySly

Posted

@byronbyron

Ah strange about the images. But I see now, on the desktop, I don't have the line and the two differing colours. I will go back and fix this.

I have a Windows Laptop, so I don't have access to preview... But good to know that it is client dependent. By the time I get to that stage of my journey, I am sure I will have found a way for this!

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