Skip to content
Submitted about 3 years ago

Desktop and Mobile Design with Css Grid and Flexbox

Boris•170
@B0R155
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

Desktop layout works at 1440px, the mobile one works at 375px. Made a grieve mistake of coding the desktop layout first, so my mobile one doesn't have the picture on it. Open to suggestions. Will try to update.

Edit: -Fixed some accessibility issues

Community feedback

  • Lanre•10
    @LanrefagbemiPosted about 3 years ago

    Hey Boris, I think you should use media queries to make it responsive , if you haven't.

    0
    Boris•170
    @B0R155Posted about 3 years ago

    @Lanrefagbemi I did. The text is responsive for the given widths, but i couldn't make the image display itself on the mobile variant. If you have any recommendations for the fix please state them. Thanks!

    0
    Lanre•10
    @LanrefagbemiPosted about 3 years ago

    @B0R155 you can try giving the image a width of 100%. That way coupled with media queries,it will look good at any width to an extent.

    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