Product card component using CSS flexbox

Community feedback

• 

  coderwww•220

  @coderwwwPosted almost 2 years ago

  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

  0

  ---

  

  Dominika Wojewska•110

  @WitchDevelopsPosted almost 2 years ago

  @coderwww thanks a lot! I'll try that :)

  0