Skip to content
Submitted 6 months ago

Responsive layout using CSS flexbox

P
VirginiaPatrika•260
@VirginiaPat
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am proud that I completed the challenge.

What specific areas of your project would you like help with?

I included in my files a css-reset.css file in which I added all the css resets from Andy Bell (https://piccalil.li/blog/a-more-modern-css-reset/), even though not all of them are necessary. Do you think it is a good practice to do that in every project? Any feedback is helpful!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Read the CSS reset and learn them all and put the ones that really needed. Some notes:

    1. Inside your HTML, there are some parts that you can easily remove or there is no point in using it. For example: You can use a div instead of article. You can remove figure and use the image directly without any wrapper. You can remove .bio-container. You can remove .container-socials. All of them are not necessary and some of them are pointless. Make your code as simple as you can.
    1. Your .card-container does not need a min-width and actually you do not need any media query for this challenge except maybe for font size. First of all you have to remove align-items: center; from your body then add a max-width in rem to your .card-container and center it with margin-inline. With this there is no need for media query or min-width.

    Your code is good and just need some refactoring.

    Marked as helpful
  • Tonny Blair•470
    @Tonny-Blair-Daniel
    • It looks good
    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