Skip to content
OverviewSolutions
15
Comments
3

coderwww

@coderwww220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • coderwww•220
    @coderwww

    You may try something like this instead of absolute positioning

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    main {
      position: static; /* removes position absolute*/
      transform: none;  /* removes transform*/
    }
    footer {
      position: static; /* removes position absolute*/
      margin: 0 !important; /* or remove class centered */
      justify-self: end;
    }

    P.S. main will be centered in the free space above footer, so you will need some additional styling, for example margin to center it relative to screen height

    And as for me, it would be better to start showing desktop view from min-width a little bit bigger then component width, not from exactly 1440px

    Marked as helpful
  • coderwww•220
    @coderwww
    1. you may add overlay with ::before ::after pseudoelements instead of div and image
    2. you may also add icons for price and time in ::before pseudoelement
    3. there is a double shadow around this block, you may add it with box-shadow css property (values for several shadows must be separated by coma)
    Marked as helpful
  • coderwww•220
    @coderwww

    In this challenge design is essentially the same for screens width 375px and 1440 px In later challenges layout could be quite different for different width screens. and ussualy this is adressed with css media queries and mobile-first approach Also this desing has a light shadow, you can add it with css box-shadow