Submitted 8 days ago

tailwindcss, flexbox

Rafael Ibarra• 60

@rafbar2000rr

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of trying to improve my code. Next time I will try to use relative units because they provide more flexibility and adaptability for responsive design.

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

There was a problem when deploying by Vercel, it didn't work because the images couldn' be read inside the images folder, so I moved the images to the src folder and then it worked.

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

I would like to know why in the following code, relative units in percentage doesn't work but absolute units like px does work.

      GitHub

Community feedback

tloyan• 255

@tloyan

Posted 6 days ago

Hi, I tested your code and noticed that in the output generated by Tailwind, it doesn't include a default font size. However, to use rem units, you need to define a base font size. You could, for example, add this to your CSS:

html {
  font-size: 16px;
}

Good work overall!

It's important to pay attention to the details (padding, sizes, etc.).
If you care about responsiveness, consider developing with a mobile-first approach and then adding constraints for larger screens. ;)

Marked as helpful

Please log in to post a comment

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