Skip to content
Submitted 4 months ago

Social links profile using Vue

Micha Huhn•200
@MichaHuhn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I made the card responsive by using a media query and by using fluid design. The card's width automatically adapts to the viewport on mobile screen sizes.
  • I used semantic HTML, e.g. nav, ul.
  • I implemented proper hover and focus-visible states.
  • I also used the q tag to create the quote.
What challenges did you encounter, and how did you overcome them?

First, I centered the card with this code:

display: grid;
place-content: center;

But that caused the card to shrink. However, the card should have a bigger width on desktop (see mockup). That's why I only centered the card vertically with this code:

display: grid;
align-items: center;

and applied a max-width-wrapper class to the card to center it horizontally and to make it responsive. This technique is explained in this YouTube video.

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

I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.

Community feedback

  • Haitham Abdulhamid•190
    @Leo-yagamiPosted 4 months ago

    Im not sure if you know the flexbox technique. You basically set the main-card component to display flex and use align-items and justify content to center the component vertically and horizontally. Something like this:

    .social_card{
   display: flex;
   align-items: center;
   justify-content: center;
}
    Marked as helpful
    0
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    @Leo-yagami I tried that at first, but flex causes the card to shrink. However, the card should be wider as shown in the mockup. That's why I chose a different approach.

    Edit: I just tried your code on the parent element and applied flex: 1; to the card. That causes the card to take up the entire width again. Then I can just apply a max-width: 24rem; as given in the mockup. Now the card is clamped to this max-width and it is responsive on smaller screen sizes. However, in this case we need to add a padding to the parent, so the card doesn't touch the viewport. That could be an approach too.

    I guess, I still stick to the max-width-wrapper technique I described earlier, because it fits the use case and works well.

    1
  • Martynas•50
    @ElMarto12Posted 4 months ago

    good job !!

    0
  • Kyle Parsotan•90
    @Kyl67899Posted 4 months ago

    Nice website

    0

Please log in to post a comment

Log in with GitHub

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