Submitted over 3 years ago

Four Cards - Sass & BEM & Grid

Szymon Rojek• 4,540

@SzymonRojek

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi. These newbie challenges are amazing.

In this project I've used:

semantic HTML elements;
Sass & BEM;
RWD;

Any comments will be appreciated :D

Thanks :D

Community feedback

Loris DUCAMPS• 425

@LKA-LORIS

Posted about 3 years ago

Hi SzymonRojek,

Very good work ! it is good for the eyes !

After inspecting your work, here is my feedback:

Pay attention to the size of your img (icons). After looking in the inspector, they are not 64x64.

To remedy I invite you to apply the following code:

img { display: block; height: auto; max-width: 100% }

without forgetting to remove the width and height of your img in your class (..grid__item-img)

I invite you to go and see my design which is not perfect but can support my point :)

https://four-card-feature-section-inky.now.sh/

I hope I helped you.

Do not hesitate if necessary

Good luck

Szymon Rojek• 4,540

@SzymonRojek

Posted about 3 years ago

@LKA-LORIS

thanks for comment :D

I have checked my code. I started project from mobile-first with 57px and then on desktop I want to get 64px max-width and height - in my opinion I do not need these properties height: auto; and max-width: 100% but thanks for a suggestion.

Greetings

Account Deleted

Incredible, it looks the same ! Congrats

Szymon Rojek• 4,540

@SzymonRojek

Posted over 3 years ago

@emmanuelniasse

Thanks for comment :D

Greetings :D

Grace• 27,870

@grace-snow

Posted over 3 years ago

Whoop, nice one!

I'd say this is very nearly perfect! Just one thing missing.... text-align: center; on your .header__heading to center it when it wraps on mobile

good job

Szymon Rojek• 4,540

@SzymonRojek

Posted over 3 years ago

@grace-snow

Thank you so much. That's true. Next time I have to use more precisely the responsive tool from the inspector in my browser because the heading was good "mostly" on all mobiles.

Super! :D Thank you for your support.

Leon• 180

@leon-bw

Posted over 3 years ago

Amazing solution! Looks perfect to me :D

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