Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section with CSS3 and HTML5

StrigZ 270

@StrigZ

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello!

I appreciate any recommendation. Thanks

Community feedback

Hania B. 1,360

@techanthere

Posted

Your solution looks great!!! But wait h1 can be the main heading with text "Reliable, efficient delivery Powered by Technology" what do you say, I don't see a reason to make it h2 maybe.

A little problem I am seeing after testing on smaller screens, a horizontal scrollbar starts showing under the width 375px and margins on right of cards starts decreasing, I couldn't understand from where did this come, can you please verify.

0

StrigZ 270

@StrigZ

Posted

@techanthere Hello!

For me, in <h1> should be the name of the company like Google or Amazon. Maybe I am completely wrong here.

I have min-width: 375px on the <main> tag, I think that's why. The reason I don't adapt a design less than 375 pixels is because style-guide.md says that the width of a mobile design is 375 pixels. Maybe I didn't understand style-guide.md right :)

Thanks for feedback!

1
Hania B. 1,360

@techanthere

Posted

@StrigZ oh I see it's fine if you are following just the style guide. But actually the good standard is to follow less to 320px at least, and that's what most of the developers on frontend mentor do, and community on slack channel will suggest as well. It's a good practice, checkout.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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