Submitted almost 2 years ago

ORDER SUMMARY USING HTML AND SASS

IJEOMA NNAEMEKA PASCAL• 280

@iamdrmeka

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

The way I added the curved Imae to the background, I dnt know if it is the best practice.

Also, I tried to use the picture Tag, but it kept breaking my page, anyone has any Ideas?

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi! 👋

Good effort on this challenge! 👍

Here are some suggestions for improvements.

The "change" is an interactive element. So, it should be wrapped by an interactive element. It could be either a or button, depending on what you think will happen after the users click it.
For your information, anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
input with type="button" was used before the button element exist. It's best to avoid using legacy elements. So, I recommend using button element instead.
For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
- @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
- PX, EM or REM Media Queries?

I hope this helps! Happy coding!

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hi IJEOMA NNAEMEKA PASCAL, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

Feel free to choose one of the two!

The rest is great!

I hope it helps... 👍

IJEOMA NNAEMEKA PASCAL• 280

@iamdrmeka

Posted almost 2 years ago

@AdrianoEscarabote

Would you mind checking the code to see if I added the background the right way?

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

@iamdrmeka do this:

body {
    background-image: url("./images/desktop.svg");
    background-repeat: repeat-x;
}

IJEOMA NNAEMEKA PASCAL• 280

@iamdrmeka

Posted almost 2 years ago

@AdrianoEscarabote

Okay. Thanks. How do I merge it with the other color?

Please log in to post a comment

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