Submitted 9 months ago

3 Column preview card component main solution (vanilla css)

Denisse Joyce• 220

@denissejoyce

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey there, thank you for checking out my solution for this challenge. Please lmk if you find any issues or if you have any suggestions on how I can improve my code/implement best practices 🫶🫡

Stuff I struggled with:

positioning the attribution for mobile and tablet view (I was able to work on this but I'd love to find a better solution!)

Community feedback

Brian• 180

@brian7homas

Posted 9 months ago

Hi denisse,

I think one of the more 'standard' ways to keep the footer at the bottom of viewport would be to follow some of the techniques on MDN web docs

hope that helps!

Denisse Joyce• 220

@denissejoyce

Posted 9 months ago

@joyreacher I'll check this out, thanks!!

Kimo Spark• 2,190

@kimodev1990

Posted 9 months ago

Everything is excellent in your design, Just a little feedback, You could use clamp ( ) method for your font-size so their sizes change responsively with the viewport dimensions and make you design suitable for any device layout.

Hope you find this Helpful.

Other than that, Really Nice work & keep Going on

Denisse Joyce• 220

@denissejoyce

Posted 9 months ago

@kimodev1990 thank you! I'll make sure to incorporate this into my next challenge solution ☺️

Kimo Spark• 2,190

@kimodev1990

Posted 9 months ago

@denissejoyce You're always welcome, Anytime....

Account Deleted

This comment was deleted 9 months ago

Denisse Joyce• 220

@denissejoyce

Posted 9 months ago

@davood-webdev hi there! Thank you for your feedback :)

Did you mean the 'Learn More' buttons? If so, thank you for pointing that out, I did not realize that the hover effect did not work on mobile — I'll work on this.
I utilized align-items and justify-content to center my main element this time :)
sr-only is for accessibility, the styles added are there so that it is visible only for screen readers.
Thank you for the tip!
Thank you for pointing this one out!

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