All comments

• 

  Midnith• 120

  @Midnith

  Submitted almost 3 years ago

  Can anything from the code be optimised?

  

  3-column-preview-card-component-main

  2

  3

  0

  

  Stefano• 155

  @StefanoDeCapitani

  Posted almost 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

  This comment has received 1 replyShow
• 

  darryncodes• 6,430

  @darryncodes

  Submitted almost 3 years ago

  Hi everyone 👋

  My 2nd challenge. Really happy with this one. Continued to embed some best practices focussing on timing, developing my design thinking AND staying calm haha.

  Any feedback is welcome

  Happy coding 🤙

  

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

  #bem#sass/scss

  1

  4

  0

  

  Stefano• 155

  @StefanoDeCapitani

  Posted almost 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

  This comment has received 1 replyShow