@ApplePieGiraffe
Posted
Hey, Anna! 👋
Wonderful job, once again! 👍
Everything looks great! And I like the fluid typography and the hover states of the SVG icons! 😉
The only way I can think of making the form responsive without media queries would perhaps be to use CSS grid for the container or wrapper and the auto-fit or auto-fill properties to break into two rows when there isn't enough space for both the input and the button to remain in the same column—but I have yet to really play around with that functionality myself! 😆
I small suggestion would be,
- Setting the
cursorproperty topointerfor the button.
Your code looks good! I noticed you're separating element and modifier classes from BEM quite nicely! 😊
As always, keep coding (and happy coding, too, of course)! 😁
@brasspetals
Posted
@ApplePieGiraffe I really need to start using Grid more - I know I rely too heavily on Flexbox. I guess it's time to try out that testimonials challenge! I also wondered something similar with auto-fit/fill, which I agree is probably the best bet - but then there's the padding/size change between the inputs to consider too. Ah, well - what's a few lines of media query I suppose. 🤷♀️
Nice catch! I had added the cursor change to the social icons, but apparently missed the button. 🤦♀️
😂 My sad, sad excuse for BEM. Glad to hear I'm slowly improving!
Thanks for always taking the time out to thoughtfully comment on my solutions, even more so as you're often the only one. I really appreciate it!
@ApplePieGiraffe
Posted
@brasspetals
I'm glad to hear the feedback is helpful! 😊
I just found this sweet article from—guess where—CSS tricks!—on how to make a responsive card component without media queries. It actually uses flexbox and the flex-wrap and flex-basis properties (along with the clamp CSS function) to make a pretty cool responsive card.
You could check it out and perhaps it could help out or give you some ideas somehow! 😁
@brasspetals
Posted
@ApplePieGiraffe
CSS Tricks is truly the font of all knowledge. 🙏
That article is great - thank you so much for the share! Because of it, I was able to go back in and not only improve the responsiveness of the form but do it in much cleaner way. Thanks again - you're the best! 👍
@ApplePieGiraffe
Posted
@brasspetals
Haha, no problem!
Keep on coding! 😀
