Skip to content
Submitted about 3 years ago

Mobile first approach with HTML and CSS with flex grid for desktop

Steven Zilberberg•40
@srz2
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Current Known Issues, Help Would Be Appreciated

  • I never know if I'm doing mobile display correctly
  • The top boarder color comes down a little bit where the design is sharper on the top
  • I don't have a good strategy to get the text on the top to match the design. I got it as close as I could but could use advice

Generally, what is the best way to debug for mobile? When looking at the mobile design for the project, I tried to use chrome in a small window but only can match it closely, not exactly.

Community feedback

  • Rémi Martineau•355
    @MartineauRemiPosted about 3 years ago

    Hey Steven ! Great job on your solution :) Did you use the "developer's tools" feature on Chrome ?

    0
    Steven Zilberberg•40
    @srz2Posted about 3 years ago

    @MartineauRemi I'm aware of them, but didn't really need them for this. Why?

    0
    Rémi Martineau•355
    @MartineauRemiPosted about 3 years ago

    @srz2 You can use it to work on your responsive design. You can simulate the viewport of any device. So you can chose a mobile type of display to get your mobile design and work on it more easily.

    Marked as helpful
    0
    Steven Zilberberg•40
    @srz2Posted about 3 years ago

    @MartineauRemi I did actually use it for that, but I could never make it match the exactly.Its definitely easier than having my phone right next to me. Thanks though!

    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