Skip to content
Submitted 6 months ago

3 column grid layout

PastaSus•80
@PastaSus
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

What are you most proud of, and what would you do differently next time?

i know a bit more about grids now i guess, be better at coding

What challenges did you encounter, and how did you overcome them?

limiting heights on grids, i got help

What specific areas of your project would you like help with?

if i did anything wrong with the css codes pls point them out and tell me what i shouuld do next time

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋👋

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    1
    PastaSus•80
    @PastaSusPosted 6 months ago

    @kodan96 ty

    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