Skip to content
Submitted 12 months ago

First Time Mobile First

NBD•240
@bdal90
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

Dear All,

Here is my next challenge which was probably my fastest one ever AND my very first mobile first approach which, I must admit, was an excellent idea as it made the project much easier to be responsive! Any suggestions maybe?

Cheers to you all,

Dalma

Community feedback

  • Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi Dalma! Nice Work Just one good practice that might help you with future projects.

    • Use the picture tag to make your images responsive. Here documentation

    Something like this:

    <picture>
  <source srcset="images/image-header-desktop.jpg" media="(min-width: 700px)" />
  <img src="images/image-header-mobile.jpg" alt="my-image" />
</picture>

    Where the browser choose the image depending of the viewport width of the device setting in the media query in the source.

    Hope this help you!

    Good code!

    Matias

    Marked as helpful
    0
    NBD•240
    @bdal90Posted 12 months ago

    Hi Matias,

    Wow, thanks! This is very useful! Thank you for sharing it with me.

    Best wishes,

    Dalma

    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