Submitted over 2 years ago

Responsive (even for Galaxy Fold) Order Summary page using CSS Flexbox

Caio de Alcantara Santos• 250

@caio-alcantara

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

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted over 2 years ago

If you want to eliminate the accessibility problem, you must add a main tag that wraps your entire application. To do this, place this main tag around your div with class container. However you will have to add an h1 tag, so change the h2 tag to h1. This is all part of structuring your html correctly. By the way, don't forget to update your solution.

Good luck in your next projects :D

Marked as helpful

Caio de Alcantara Santos• 250

@caio-alcantara

Posted over 2 years ago

@Sdann26 Hey! Just made the changes you suggested. Thanks a lot :)

Caio de Alcantara Santos• 250

@caio-alcantara

Posted over 2 years ago

How was I supposed to use the background image?

itzjter• 120

@itzjter

Posted over 2 years ago

@caio-alcantara heyy! If you want you can try with this:

In your container you can put these:

.container {

background-image: url(put the relative link of your background);

background-color: hsl(225, 100%, 94%);

background-size: 100% 50%; (or contain, is up to u).

background-repeat: no-repeat;

}

Hope it was helpful ^^ Let me know if it works :)

Marked as helpful

Caio de Alcantara Santos• 250

@caio-alcantara

Posted over 2 years ago

@itzjter Just changed the background, thanks for the tip :)

itzjter• 120

@itzjter

Posted over 2 years ago

@caio-alcantara :)

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