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

Mobile first component with Flexbox & transparent overlay

Alec 40

@AlecDye

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


What is the preferred way of styling the <picture> element? I think wrapping it with a container div (similar to the standard practice of wrapping an <img> element with a container div) adds an unnecessary div to the html.

Community feedback

P

@gsterczewski

Posted

Hello Alec 👋, my name is Grzegorz.

Your solution is nice, but there is a room for improvements.

  • There is empty space between image and right edge of the component. You can try to set width on the image to prevent that (now you have only max-width).

  • When I decrease screen width your image gets too small, and at some point is no longer visible (you can set different breakpoint to change to mobile view sooner)

Keep up the good work! 💪

See you on the coding trail 😉

Cheers!

Marked as helpful

1

Alec 40

@AlecDye

Posted

@GSterczewski Thank you Grzegorz! I'll keep working on it.

0

@arshkkk

Posted

Looks great, only image is missing for mobile version

Marked as helpful

0

Alec 40

@AlecDye

Posted

@arshkkk Ah, good catch thank you!

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