Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pure HTML CSS Social Media link Page

Mohammed 50

@Mohammed-morsiwala

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Structured CSS with hands on flex box & more confident on HTML structure

What challenges did you encounter, and how did you overcome them?

Still facing issues in deciding width Hight & make the design responsive

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

I want to understand min-with max-with with media query to make website responsive

Community feedback

P
Sayed Ali 80

@sydalwedaie

Posted

Hello Mohammed!

Excellent Job. You pretty much nailed the overall design. I too find it difficult to make it 100% down to the smallest details without the Figma design files.

Regarding media queries, the general practice is to use min-width. The idea is that you design the website mobile first; meaning the default values (paddings, margins, layouts, etc) are all made to look best on mobile. Then, in a media query, you specify the minimum width at which things should start to change. So for example you would tell it to start expanding some paddings and margins when the width reaches 375px, and then start changing layouts when hitting 700px. So you are always expanding from the smaller sizes, rather than shrinking down to mobile size.

Hope it helps.

Marked as helpful

0

@sukrut57

Posted

It looks great., you can try to add some more margin to the 1st child of the button to push them down closer to the end or use flex to align the items

0

Please log in to post a comment

Log in with GitHub
Discord logo

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