absolute, flex, pseudo

Community feedback

• 

  Akshay Meshram•390

  @akshay63

  Posted about 4 years ago

  Hey @Doaa. The thing that made your layout a bit confusing is that you have used display: grid for the container but in the media query you've used the "Mobile-first" approach where you have used the "display: flex;" property. This is where all the problems related to layout issues lie.

  If you want to use grid, use only grid for the placement of the component & set display: grid; to the container and once you set this then you don't have to specify the display property in the media queries. Just use its properties for alignment and position.

  for ex: .container{ display:grid};

  @media screen and (min-width: 800px){ grid-template-rows: repeat(2, 1fr); }

  Hope it helps.

  00