Submitted 12 days ago

Mobile first approach using Flexbox

Srijan Manandhar• 150

@srijanss

Preview site View code

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

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

@PauloHenriqueOC

Posted 12 days 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

Please log in to post a comment

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