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 Solution

Kunjamin-1 130

@Kunjamin-1

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

@fortuneiyoha

Posted

@Kunjamin-1 Congratulations on completing the challenge! 🎉

To enhance the spacing and width of your card container on desktop screens, you can use the following CSS settings:

.container {
    ...
    padding: 2rem;
    width: 35vw;
    ...
}

For better width adjustment of your card container on mobile screens, use this media query:

@media only screen and (max-width: 600px) {
    .container {
        width: 70vw;
        /* min-height: 72vh; */
    }
}

To ensure the social links are responsive across all devices, set the width to 100%:

/* Update the lines below */
.work {
    width: 100%;
}

/* Delete the lines below */
@media only screen and (max-width: 600px) {
    .work {
        min-width: 80%;
    }
}

Great job on your project! 😄 Keep up the fantastic work and happy coding! 🚀

0

@Sangeetha-1902

Posted

Looks good.But you should adjust the width.

0

Kunjamin-1 130

@Kunjamin-1

Posted

@Sangeetha-1902 can you suggest me a way

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