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

social-links-profile-mainhttps://medium.com/frontend-mentor/a-complete

Reem 40

@reemoon-ctrl

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@fachridp

Posted

Did you have any difficulties in making this challenge?

0

Reem 40

@reemoon-ctrl

Posted

@fachridp yes in position every thing in center&make it responsive

0

@fachridp

Posted

@reemoon-ctrl if you want to center an element, you can give display: flex, justify-content:center for the horizontal axis (left to right), align-items: center for the vertical axis (up to bottom) and min-height: 100vh to the wrapping element. That way all the elements inside will be centered.

By default display: flex will make the element inside that div into row direction.

But if you give a flex-direction: column property the direction of Y axis and X axis will be change/swap also. So it will be, align-items: center for the horizontal axis (left to right) and justify-content:center will be for the vertical axis (up to bottom).

Marked as helpful

0

@fachridp

Posted

@reemoon-ctrl for make it responsive you can use @mediaquery, display:grid or even with display:flex also.

You can try that if you doing next challenge from this website or other source.

Marked as helpful

0
Reem 40

@reemoon-ctrl

Posted

@fachridp appreciate that thanx a lot

1

@fachridp

Posted

@reemoon-ctrl Your're welcome. Let me know if you have any questions in the future.

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