Skip to content
Submitted over 3 years ago

Responsive order summary card using CSS Flexbox and CSS Variables

Aleksei Kovalev•50
@AlekseiK412
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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
    @anmolkapilPosted over 3 years ago

    1. 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 :)

    2. 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.

    3
  • Patrick•14,265
    @palgrammingPosted over 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;
    0

Please log in to post a comment

Log in with GitHub

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