Skip to content
Submitted 6 months ago

Mobile first approach using Flexbox

Srijan Manandhar•470
@srijanss
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Learned about

  • semantic HTML
  • mobile first development approach
  • CSS Flexbox.
What challenges did you encounter, and how did you overcome them?

While using Flexbox, some browsers didn't support flex-gap. So, tried to use margins on the element instead. But later figured out that some old versions of those browsers doesn't support that.

What specific areas of your project would you like help with?

I am using media queries for responsiveness. Is there a way to do it without media queries?

Community feedback

  • PauloHenriqueOC•50
    @PauloHenriqueOCPosted 6 months ago

    Hello Srijan

    Your solution looks really pretty cool.

    • The code is easy to understanding.
    • The layout is identical to the chalenge

    About your question, in my experiences media queries is one of the way to do responsiveness pages. I belive you can do this programatically but the best way is with CSS. You can read about "coluns", "Flex Box" and "CSS Grid" for example.

    This link maybe can help you to start: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

    Marked as helpful
    1

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