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

Mobile-first workflow, issues with media queries?

Ynotlocin1ā€¢ 80

@Ynotlocin1

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


Hello! 2nd exercise completed on this site, and certainly not the last! I tried starting this page with a mobile-first approach and then adapting it to a web format. I didn't encounter major difficulties (perhaps the code is not optimal? I'm counting on you to let me know), the only challenge I faced was with media queries. How can I create smooth transitions within the media query? Currently, when reaching 900px, there is a sudden jerk.

I also noticed a larger bottom padding on the page than at the top, and when I inspect the page, nothing is indicated at the bottom; it's not related to the body or anything. I don't understand it much!

Thanks in advance!

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @Ynotlocin1!

Your project looks great!

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

Ynotlocin1ā€¢ 80

@Ynotlocin1

Posted

@danielmrz-dev Thanks Daniel ! But could I know why it is more efficient than margin auto ?

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