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

Responsive card using Flexbox and SASS

@imrsic-dev

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, I would like your feedback and suggestions for the image part. What would be the best practise and solution for implementing overlay. I used <div> container, and added backround-image property to it.

Thanks in advance

Community feedback

T
Grace 29,530

@grace-snow

Posted

Hi

It all looks a lot smaller than the design on desktop preview, but looks good for me on mobile. The image goes very small in height on mobile landscape so consider adding a larger min-height on that.

1

T
Grace 29,530

@grace-snow

Posted

Have a rethink of your html structure. Those numbers don't make sense as h2s.

1

@imrsic-dev

Posted

@grace-snow thank you for your feedback I appreciate it, sorry for my late reply.

I used HTML structure hierarchy from h1 to h2 in this case. I think sizes shouldn’t matter in that case, but I could be wrong.

0
T
Grace 29,530

@grace-snow

Posted

@imrsic-dev it’s not the order or sizes that are the issue. It’s that numbers like “10k” can never be headings as they carry no meaning. They have to be in the same semantic element as the words that follow them. 3 bullet points make sense for those stats, three sets of headings and paragraphs do not

Marked as helpful

1

@imrsic-dev

Posted

@grace-snow ok, now I understand what you meant, ok I agree with you, headings weren't the best solution. So you propose <ul> with <li> as better solution?

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