Submitted over 2 years ago

Responsive 3 column preview card component using Flexbox and Sass

Laurel Ray• 30

@laurel-ray

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would appreciate any feedback or tips.

Specifically, I'm wondering how I did on my mixins and media queries. I struggled a lot with the phone layout.

Why isn't my background color working?

I thought I'd give utility classes a try for margins. It worked, but I'm not sure if I should have used them in this case.

Also, I'm looking for any feedback on how I could make my code better, prettier, more efficient, and up to date. I tried to keep accessibility tips from my last challenge in mind, so we'll see how I did this time.

Community feedback

Ken• 4,915

@kens-visuals

Posted over 2 years ago

Hey @laurel-ray 👋🏻

I have some suggestions to help you fix the HTML issues and some other things.

First, it's awesome that you already added aria-hidden="true" to the icons, however, you still need empty alt tags for them to fix the errors.
Next, backgrounnd-color of body should be #f2f2f2, instead of plain white.
Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

I hope this was helpful 👨🏻‍💻 you did a superb job for the second project, keep it up. Cheers 👾

Marked as helpful

Laurel Ray• 30

@laurel-ray

Posted over 2 years ago

@kens-visuals Hi again! Thanks for your feedback. I was able to fix these issues, I think.

Ken• 4,915

@kens-visuals

Posted over 2 years ago

Hi again @laurel-ray, sorry I forgot to mention that you still need alt tag but empty in this case. I know it's kind of weird, but that' just HTML 😅

seekinfox• 560

@seekinfox

Posted over 2 years ago

You have wrong variable-name /spelling-mistake in background that's why it is not working.

I had trouble finding main scss file, I think you can put .scss files in scss folder and compile them in css folder, that would organize your code well.

Also you can add README.md file so visiters can have understanding of your project without going through your code.

You can use read-template.md file for reference, it's available in download zip.

Marked as helpful

Laurel Ray• 30

@laurel-ray

Posted over 2 years ago

@seekinfox Thank you, I think I was able to fix these issues. I appreciate your feedback.

Laurel Ray• 30

@laurel-ray

Posted over 2 years ago

I wanted to mention I'm still pretty new to github so if this repository looks a mess, that's why.

Please log in to post a comment

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