Submitted about 3 years ago

Responsive order summary card using CSS Flexbox and CSS Variables

Aleksei Kovalev• 50

@AlekseiK412

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

On very small screens smaller than 375px, the card starts shrinking and the content inside starts overflowing, how should I go about fixing that? Also, for the hover states the style guide doesn't specify the colors I should use, does it mean I have to just find out the colors myself?

Community feedback

Anmol Kapil• 655

@anmolkapil

Posted about 3 years ago

You can just make the colour lighter in hover state. We are given hsl color values from frontendmentor. (h=hue, s=saturation, l=lightness) Decrease the "l" value a little and done :)
I see you are using "display: flex" on your component. To get proper height of image in "row-direction: column". You should insert image in HTML instead of applying "background-image" in CSS.

Patrick• 14,285

@palgramming

Posted about 3 years ago

you should add this to your background on your body

        background-repeat: no-repeat;
        background-size: 100vw 40vh;
        background-position: center top;

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