Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Social Proof Section - Flexbox

Anna Leigh 5,135

@brasspetals

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


While I don't have any specific questions about this challenge, feedback is very welcome!

Community feedback

P

@emestabillo

Posted

Hi Anna, just wanted to say that this is nicely done! I can tell you spent quite some time going through the design. My only recommendation would be to try out mobile-first for your next project, and maybe check out the flex property gap as a substitute for first-of-type and the likes. Both will save you a few lines of code. Hope this helps :-)

2

Anna Leigh 5,135

@brasspetals

Posted

@emestabillo Hi, Emmilie! Thank you so much taking the time to provide feedback! I definitely need to work on getting used to mobile-first and will be reworking my Fylo solution (not yet submitted) to do just that. 😄

While implementing the flexbox gap property, I came across an interesting issue. Currently, Safari doesn’t support it, so I wanted to use a feature query as a fallback. This led me to an interesting discovery - there is no way to currently check if a browser supports the flexbox gap property. Well, at least there isn’t without some tricky workarounds. A great article about this issue can be found here: https://ishadeed.com/article/flexbox-gap/

Unfortunately, combining query conditions (one of the suggestions in the article) doesn’t seem to be working for me. I haven’t attempted the JS workaround since this is a fairly small challenge and would ultimately end up being way more code than my original solution - good to keep in the back pocket though!

Thank you again!

1
P

@emestabillo

Posted

@brasspetals Yes, Safari/IE currently doesn't support flexbox gap property - SURPRISE!😅 As you know, this is just one of many. I'm not discounting Safari or IE, but I'd like to think majority of users will be on Chrome or Firefox. I think you can use this site to check for support. Using a fallback is good to learn though. Looking forward to your next one!

0
Anna Leigh 5,135

@brasspetals

Posted

@emestabillo I love "Can I use.."! That's actually how I found out about the issue in the first place, but thank you for sharing. It is a truly great resource! You are absolutely right about the majority of users, and I am probably over-concerned with "fringe cases." 🤷‍♀️

Also, thank you again for suggesting going the mobile-first route. I just submitted my Fylo data storage solution, which I reworked from desktop-first at your suggestion. It was a great learning experience, and I actually prefer the styling changes that resulted!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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