Skip to content
Submitted over 2 years ago

Responsive card component: mobile-first and responsive images

Brian Yeadon•70
@brianyeadon
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I initially hit a wall when it came to switching out the mobile image for the desktop version but in searching for a solution I learned about responsive images and the picture element and all was well with the world.

No specific questions but as always, feedback and suggestions on how I can improve are very welcome!

Thank you!

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    It looks great Brian, I just suggest you put the status of the preview card component in the list item to add more semantics to your project. like this:

    <ul class="stats-preview__stats">
   <li>
      <span class="stat-number">10K+</span>
      <span class="stat-name">Companies</span>
   </li>
   <li>
      <span class="stat-number">314</span>
      <span class="stat-name">Templates</span>
   </li>
   <li>
      <span class="stat-number">12M+</span>
      <span class="stat-name">Queries</span>
   </li>
</ul>

    I hope this is useful to you... Keep coding👍

    Marked as helpful
    1
    Brian Yeadon•70
    @brianyeadonPosted over 2 years ago

    @Bayoumi-dev Thanks for the feedback!

    I hadn't thought of wrapping the stats in an unordered list. Semantics and accessibility are two subjects I need to learn more about -- perhaps it is time I got started on that.

    Thanks again, your feedback was helpful!

    0

Please log in to post a comment

Log in with GitHub

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