Submitted almost 3 years ago

I use DIsplay Flex and @Media for Responsive

Simone Paiva• 40

@simonegpaiva

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

I had difficulties with the background.

Please, tell me, what can I do to improve

Community feedback

Adrian Hartanto• 60

@adrianh42

Posted almost 3 years ago

You can set these to your body {},

height: 100vh; makes that your contents take up the full height of the viewport

background: url(image) "color"; shorthand to apply an image and a color to your background

background-size: 100% 50vh; makes the background image takes up 100% width and half the viewport height

You might want to remove the background-position.

Simone Paiva• 40

@simonegpaiva

Posted almost 3 years ago

@adrianh42 I managed to fix the background, but I don't understand why the preview here on the site doesn't correct

But thanks for your help :)

Adrian Hartanto• 60

@adrianh42

Posted almost 3 years ago

@simonegpaiva I might be wrong, but I think you haven't pushed your changes to your repository. "Generate Screenshot" button also has a little delay as far as I know.

Bartosz Skrzydelski• 20

@BrtSkr

Posted almost 3 years ago

Hi, I would say that you didn't have to use media queries. They kinda take long time setting them all up and for the long run they might create some trouble later on, give a try for viewport units (vh,vw and if you decide to use them remember to put meta tag inside head).

Simone Paiva• 40

@simonegpaiva

Posted almost 3 years ago

@BrtSkr Thanks for your help! These things have been my biggest difficulty

Guillaume• 10

@Cedrazar

Posted almost 3 years ago

Hi, for your background, you can use background: top no-repeat or background: no-repeat cover in your CSS file.

Simone Paiva• 40

@simonegpaiva

Posted almost 3 years ago

@Cedrazar Thanks!I tried, but it didn't work. There must be something wrong in the code.

Thanks for your help! :)

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