Responsive Social Proof Section - Flexbox

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  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

  @brasspetalsPosted about 4 years ago

  @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

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  @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

  @brasspetalsPosted about 4 years ago

  @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