Frontend Mentor | Social links profile solution coding challenge solution

Solution retrospective

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

Proud of my ability to understand how to structure html so it is semantically correct.
Additionally, understand how to use media queries to make my website responsive.

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

Had not come across for lists and therefore had to research it

Community feedback

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 13 days ago

You have <main> and <div class="container">. You don't need two, just one is fine. Also when you want to align project to the center with flex or grid add min-height: 100vh; As now your aligns everything to the center of it's height, not to the center of your view. Hope you found this comment helpful :)

RajanCP• 50

@RajanCP

Posted 13 days ago

@SvitlanaSuslenkova Hi Svitlana, I only added <main> since someone earlier said it is semantically correct to include it but I agree with you.

Also, wouldn't using "min-height:100vh" stretch the container to the full height of the viewport which looks odd. Am I adding this in the wrong place?

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 13 days ago

@RajanCP you have max-height not to stretch anything too much

RajanCP• 50

@RajanCP

Posted 13 days ago

@SvitlanaSuslenkova Sorry I think I don't understand.

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 13 days ago

@RajanCP you have to add flex to the parent component. It's the component inside which you want to center your project. Try:

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

Marked as helpful

RajanCP• 50

@RajanCP

Posted 13 days ago

@SvitlanaSuslenkova Yes, that appears to have kept it centred regardless of whether I zoom in and out. Sorry to ask again, but why does the min-height: 100vh keep it centred? How would you say what the code does in plain English.

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 13 days ago

@RajanCP your project was centered before min-height: 100vh; The problem is that it centers to it's height and it's height is not full height of the screen, but the height of your content.

RajanCP• 50

@RajanCP

Posted 12 days ago

@SvitlanaSuslenkova I see, thank you

MikDra1• 6,090

@MikDra1

Posted 13 days ago

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 600px;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

RajanCP• 50

@RajanCP

Posted 11 days ago

@MikDra1 Thank you for the response! Will keep this in mind

Babalo Nogqala• 30

@babalonogqala23

Posted 13 days ago

great work it is kind of hard to make something pixel-perfect but you did very well.

RajanCP• 50

@RajanCP

Posted 13 days ago

@babalonogqala23 Thank you, use I don't have access to figma files

Social links profile solution

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community