Submitted 6 months ago

Four card feature section using grid

plantpirate• 190

@plantpirate

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

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Most proud of using grid and placing objects within grid areas. I'm not sure I did it correctly, but the layout looks similar.

What challenges did you encounter, and how did you overcome them?

So many. Most of it came from font sizes at different screen sizes, working with widths for different elements. I just used methods that seemed to work.

What specific areas of your project would you like help with?

I feel like I just patched this all together. I was having issues with the grid, plus width and max-widths. If you take the time to look at my code, please give me feedback on best practices for grid placement if this was all wrong, or help with the widths if i was coding incorrectly.

Community feedback

Ata Abatay• 160

@ataabatay

Posted 6 months ago

I took a look at your code and I saw a lot of boilerplate copy paste styling you got for things that don't even exist, is there a reason why you're doing that? I liked how you used the colors are variants that's cool, the way you did the grid looks good to me I did it almost identically so overall welldone no need to overthink here :)

Marked as helpful

plantpirate• 190

@plantpirate

Posted 6 months ago

@ataabatay yes I overcomplicated the code when I started getting confused, then tried editing things out later. Thank you for the feedback!

BT738844• 600

@BT453567

Posted 6 months ago

Hello @planpirate

Excellent job looks great.

Couple of small things that could improve the solution.

You could try adding a max-width to your card div (ai-role) as the cards look a bit stretched when in views below 1000px.
You could argue that "Reliable, efficient delivery" should be a p tag rather than a h1 tag as this appears to be more of a descriptive text rather than a heading.

Regards

Marked as helpful

plantpirate• 190

@plantpirate

Posted 6 months ago

@BT453567 oh max-width for small screens is something I hadn’t thought of. I figured a media query was the best way to go to stop too much stretch. Thank you!

For the h1, I’ve read before that you shouldn’t have other text elements ahead of your h1 tag? But if that’s not the case, then huge if true

BT738844• 600

@BT453567

Posted 6 months ago

@plantpirate I believe you are right that ideally you should have the first text as your h1 heading, however it is not a strict rule and exceptions can be made such as in this example.

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