Artedix9• 20
@Artedix9
Posted
h1 font do look different from the figma file. But everything else looks on point to the given design, and nicely structed codes
1
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
Well, fixed width of img and .card-text seems not very responsive. However, you can notice it only on viewports less than 320px, so technically it's fine.
Flexbox is cool:)
What challenges did you encounter, and how did you overcome them?
h1 font looks a bit different in figma than on html although all properties of typography seems the same. Why is that or I am just crazy and they are the same?
What specific areas of your project would you like help with?
Flexbox children behave like inline-block - no newline and minimum width possible? Are there any differences/details ?
Community feedback
Huy Phan• 1,400
@huyphan2210
Posted
Hi, @vladzen13
I saw your solution and your solution retrospective. I have some thoughts:
- You mentioned your
h1looks different from the design. It might be because the link to the font family is incorrect. Try updating it fromhttps://fonts.googleapis.com/css2?family=Outfit:wght@400,700&display=swaptohttps://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap. - Regarding the Flexbox question, Flexbox offers more flexibility by allowing items to grow, shrink, and wrap dynamically using properties like
flex-growandflex-wrap. Inline-block elements don’t have the same responsiveness, as their size is mostly based on content or a set width. Additionally, if you want Flexbox items on new lines, you can setflex-direction: columnon the Flexbox itself.
Hope this helps!
1
Vladislav Zenin• 100
@vladzen13
Posted
@huyphan2210
- You are so right on Google Fonts issue, thx a lot!
- About Flexbox - yeah, I wrote it in a strange way. I meant - by default single flex children is just like inline-block element.
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