3-column-preview-card-Built using CSS variables and flexbox.

Community feedback

• 

  Mariam Fkini•80

  @Mariam-RfPosted almost 3 years ago

  Hey Saran. Great job on completing this challenge :) As for your question, the layout is not placed in the center when it comes to the laptop and desktop view. I have a few suggestions for you to make the design better, but they're not mobile-first. For the body: Start by changing the height to 100vh Change the display of the body to display: flex instead of grid Also, change "justify-content" and not "justify items" because it's incorrect. Both"justify-content" and "align-items" should be on "center". Also, you should note that they are only used with flex layout and not grid. When you change the settings of the body, you'll easily have your card's container in the center of the page, instead of using "position: absolute" and "transform: translate". Again, you'll need to set the mobile and tab view. It can be done by just changing the flex-direction to "column".

  For the card's container: Change the width to use percentage instead of pixels, since it's a more flexible option to change depending on the screen size. For desktop and laptop, you may want to put it on 60%. I played with your code in my dev tools in Chrome and found that this is optimal.

  Hope this helps. Good Luck! :)

  Marked as helpful

  1

  ---

  

  Saran•460

  @Saran-73Posted almost 3 years ago

  @Mariam-Rf Thank you for your feedback I appreciate it.

  1