Submitted over 1 year ago

Mobile-first workflow, issues with media queries?

@Ynotlocin1

A solution to the Social links profile challenge

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!

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,830
@danielmrz-dev
Posted over 1 year ago
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

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