Submitted over 2 years ago

Responsive page using CSS Grid

João Paulo Roland• 20

@jp-roland

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

1 - I feel like my margin/padding handling is a mess. Any tips on how to make them simpler? 2 - Also, some text would not look similar to the screenshot until I used non integer font-sizes. Is this a common or even good practice?

Thank you for your time and feedback.

Community feedback

Eles• 1,300

@eleswastaken

Posted over 2 years ago

Hi!

Very well done!

I didn't see that much of a problem with your paddings or margins. Though for better looks you could make it responsive for tablets as well(2 columns of cards instead of one). And last, the top stripes/lines at the top of the cards could be done using pseudo elements of separate divs/spans.

The best of luck!

Marked as helpful

João Paulo Roland• 20

@jp-roland

Posted over 2 years ago

Hi @eleswastaken , thank you for your feedback. I forgot mobile also means tablets. I was too focused on the smartphone screenshot provided in the challenge. I'll keep that separate element idea in mind on my next challenges.

Mojtaba Mosavi• 3,760

@MojtabaMosavi

Posted over 2 years ago

1- I think your margins and padding look good because you've not violated box-model rules of how to set those. Can you elaborate a lite bit why you think it's not handled well ?

2- I'm not expert on this but logically it should have any impcat on how the font is rendered otherwise the spec would not allow their usage.

Keep coding :=)

Marked as helpful

João Paulo Roland• 20

@jp-roland

Posted over 2 years ago

Hi @MojtabaMosavi , thank you for your feedback. I feel the margins and padding are too fiddly. I imagined once I figured their values for the mobile version, I wouldn't have to do it again for the desktop version after redefining the grid template areas.

Mojtaba Mosavi• 3,760

@MojtabaMosavi

Posted over 2 years ago

@jp-roland That's not usally doable when making it pixel perfect but setting them algorithmically may be what you looking for and by that I mean you define a skeleton and set margin and padding for that rather than setting it for specific element.

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