Skip to content
Submitted about 1 year ago

Responsive landing page without media queries

Ricardo•520
@ricardo1003
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?

not sure in this project, probably the hover effect i added

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

i didnt encounter any big challenge

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

i don't know why but when I try the page on my computer it looks perfect, but when I try on my phone some texts inside the buttons aren't centered for some reason, i even tried changing the centering method but it didn't worked

Code

Please log in to post a comment

Log in

Community feedback

  • Manav•390
    @manav-sharma69

    Hi! I looked at your code and found out that you're using align-content: center; property on the anchor tags.

    However, this might not be working because, as MDN says, 'This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)'.

    And the default of flex-wrap is nowrap.

    Your problem should be solved if you used align-items: center; on <li> element. Also, there's the align-self property which can be used in place of align-content, but I don't really use it and it doesn't always work (read the docs).

    Relevant MDN links:

    Hope this helps!

    Marked as helpful
  • Ahmed Yasser•460
    @ahmedyasserdev

    hey Ricardo , i see that you made a great job , keep going 🔥

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