Skip to content
Submitted about 3 years ago

3 Column Preview Cards written using Vue.js, Sass

sass/scss, vue
Bradley Smith•230
@bradleyhop
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This one was relatively simple. When sizing elements (padding, margins, etc), I tend to use 'rem' units everywhere to keep scaling consistent (especially when using the zoom only text option in browsers). Is it better to use 'em' or some other measure? I guess I'm asking where's a good resource for learning to build elements of your site that scale well?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    Claire Calder•310
    @claire-ca

    Hi again, your solution looks great Bradley! The only slight change I would make would be to remove the border-radius from the middle card and the inner edges of the two outer cards to make it match the design.

    Regarding if you should use 'ems' or 'rems' in your code, I don't think one is better than the other. As long as you know how they both work, just picking the best one for that situation seems to be the best option. I've been the opposite of you and using ems all the time (apart from for font-sizing), but I think I'm going to consider the situation more and use what I think is best rather than just sticking to the one unit all the time.

    I can highly recommend Kevin Powell's YouTube channel for great tips about building responsively. Here is a link to a video he has about knowing when to use certain CSS units - it made me rethink using ems all the time in my code.

    Marked as helpful

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