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

status preview card component main

Alazar Getachewā€¢ 260

@AlazarG19

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


if you have any better recommendation on making it responsive i will gladly accept it

Community feedback

Joshuaā€¢ 130

@dyntbn

Posted

Hey Alazar!

Just completed this today too and woah, yours is near a perfect match, great job! šŸ˜„šŸ‘

Answering your question about responsiveness, I have some tips:

  • Use a parent container to wrap your sub-container elements. These would be your .container and .image-container.
  • Utilize the parent container to control its width, either in fixed units, or scaling units such as vw. This would be how you size the main component itself.
  • Utilize the parent containers width restriction to your advantage. Use the % unit to scale it dynamically, splitting that 100% between elements, and ultimately totaling to 100%. If it is over 100%, your content will overflow. This would be your .container and .image-container.

That should fix your pill component from splitting apart and be responsive to some extent. I'm currently studying more on media queries and responsiveness, so this is the best I've got right now.

Hope this helps you out! Have a great weekend Alazar.

Marked as helpful

1

Alazar Getachewā€¢ 260

@AlazarG19

Posted

@dyntbn thanks for the feed back

1
Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think "companies" and its preceding text needs to be a bit bigger

In terms of accessibility issues simply wrap all your content between main tags

I hope this helps

Cheers Happy coding šŸ‘

Marked as helpful

0

Alazar Getachewā€¢ 260

@AlazarG19

Posted

@TheCoderGuru thanks for the comment coderguru i already wrapped my component in a main tag and the text i think its equal the problem is that the parent div position is a little higher

0
abiy5791ā€¢ 40

@abiy5791

Posted

Your solution looks great bro

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