All comments

• 

  Midnith•120

  @MidnithSubmitted over 3 years ago

  

  3-column-preview-card-component-main

  2

  30
  

  Stefano•155

  @StefanoDeCapitaniPosted over 3 years ago

  Hey @midnith, welcome in the community! Great work :)

  I suggest you to try using display: flex-box on the container instead of inline-block on the cards, it will make it so much easier to position the items where you want inside a container and to avoid at the start many responsiveness issues you could run into.

  In case you don't know where to start, here you can find some interesting stuff:

  • An overview to get some context - Youtube - Kevin Powell
  • [A complete guide to Flex-box - CSS-Tricks] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

  I hope these resources are as useful to you as they have been to me!

  Happy coding ;)

  Marked as helpful

  1
• 

  darryncodes•6,370

  @darryncodesSubmitted over 3 years ago

  

  3-column preview card using HTML, SCSS, FlexBox & Grid

  #bem#sass/scss

  1

  40
  

  Stefano•155

  @StefanoDeCapitaniPosted over 3 years ago

  Great work, well done @darryncodes!

  I have only a suggestion that might be useful. In order to place the container in the center of the page you can do something like this:

  .body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

  I'm not sure this is a best practice but I find this solution handier than trying different margin sizes till the wanted result is obtained. Hope it'll save you some time in the future ;) What do you think about it?

  Happy coding!

  Marked as helpful

  0