3 Column Preview Card Component

Community feedback

• 

  Opeoluwa•330

  @Opeoluwa-OgunlajaPosted over 2 years ago

  Hi TRG,

  • you could style the body tag like:

  body{
  display: grid;
  place-items: center;
  width: 100vw; height:100vh;
  

  • You can use that that to center your elements instead of giving position: absolute to the content so you can get rid of that transform that's taking the content of the page

  • You can add a, maybe width: 80% to the media query of your .card class so it'll fill the page

  -I also think it's a good Idea to use grid( display: grid for these columns

  • You can write;

  .card{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (max-width: 376px) {
  .card{
  grid-template-columns: 1fr;
  }
  }
  

  • The above will make the colums fill all the space available to them

  Hope those were helpful 🙂

  Marked as helpful

  1

  ---

  

  TRG•150

  @MugeshTRGPosted over 2 years ago

  @Opeoluwa-Ogunlaja Thank you so much for your reply and suggestions! Highly helpful!

  0

  

  Opeoluwa•330

  @Opeoluwa-OgunlajaPosted over 2 years ago

  @MugeshTRG Happy to help! 😁

  0