Skip to content
Submitted over 3 years ago

Use of flex for layout options

Srijan Manandhar•40
@srijan-srijan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have problems when I have to set definite values to the width or height of elements.

In this case, I am unsure of whether to put a max-width property on the cards or just let it be on very large screens.

Also, I tend to be using repetitive properties on my stylesheet and would like to know how to implement "DRY" principles in this as well as future projects.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    👋Hi Srijan Manandhar! My name is Vanza!

    In my opinion setting a max-width on the cards would be a great choice. It will prevent the three cards become too wide. Also, try to add margin: 0 auto on cards to make it horizontally center.

    That's it! Hopefully this is helpful!

    Marked as helpful
    0
    Srijan Manandhar•40
    @srijan-srijanPosted over 3 years ago

    @vanzasetia Thank you for the suggestions. I will definitely add these to the code.

    If you may, do you have any suggestions regarding DRY principles when writing CSS or SCSS?

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    @srijan-srijan I have a suggestion on DRY based on my experience is that try to create utilities classes on your CSS, for instance like container, flex, grid, or even padding classes. That way you don't have to keep repeating specific CSS property. For example, if you wan to use display: flex multiple times, all you have to do is just use the flex class whenever you need it.

    That's it! Hopefully this little tip help you!

    0
    Srijan Manandhar•40
    @srijan-srijanPosted over 3 years ago

    @vanzasetia Thanks. Will try to apply DRY on my next challenge :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord