Skip to content
Submitted over 3 years ago

Mobile first site using Flexbox

Daniel•35
@danielczuk
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 didn't have many problems with this challenge and I'm happy with the result as it was my first project. The only thing I had doubts with was the background-image. Specifically I was wondering whether I should include background URL for mobile-view first and then add desktop URL in media queries or put both URLs in media queries. I went with the second option as I thought the page would load an image only once and not twice in case of a desktop view. Was this the right move? Thank you for all feedback and happy coding!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello, Daniel! 👋

    Good work on this challenge! 👍

    I'd like to suggest adding a max-width to the card (and perhaps a max-height, as well) so that the card component doesn't become too wide or too heigh on extra-large screens.

    As for the background image, you can simply add the mobile image to your CSS and change it to the desktop image using a min-width media query. Performance shouldn't be much of an issue (and that'll ensure that the background image is visible for screens of all sizes). 😉

    Keep coding (and happy coding, too)! 😁

    0
    Daniel•35
    @danielczukPosted over 3 years ago

    Hi, I appreciate the feedback! I haven't thought about max-width and max-height, but it seems like a good and safe idea. About that, what do you think about the units I've used in width and height? I had problems using the same unit and somehow percentages were working in elements that vh and vw didn't. So is it a bad practice to use different units to define those two?

    As for media queries, are you saying that for desktop view site loads only one image (the one defined in media query)? Or it loads both, but that isn't that big of a difference in performance? I did it this way because I thought it would be seen as better practice.

    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