Submitted over 3 years ago

Intro-component. Flex,Sass,Mobile-first.

Artem Ponomarenko• 365

@ArtemPonomarenko

Preview site View code

This is a solution for...

Intro component with sign-up form

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey guys! A few new challenges were met on this one =)

When you insert an invalid input and the error appears, some elements move around a bit. Is there a way of "stabilising" them?
I used " @include breakpoint () {} " method for this project, instead of putting all the media queries in a separate file. Is there any major differences between these 2 methods? Or it's just a preference ? Thank you as usual for your advices! Bisous Bisous!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Artem Ponomarenko!

You've done a good job, once again, on another challenge! 👍 Your solution looks good and responds well! 🙌

For your first question, you can set the opacity of the error message to 0 rather than setting the display to none so that the error message still takes up space when it isn't visible. Then you can set the opacity back to 1 when the error message should be seen but the height of the form shouldn't change because no new content is added. 😊 IDK... that's just an idea. Perhaps try playing around with the visibility property to achieve the same effect.

I don't use mixins in Sass very much—so I might let someone else take your second question. 😉

Keep coding (and happy coding, too)! 😁

Artem Ponomarenko• 365

@ArtemPonomarenko

Posted over 3 years ago

@ApplePieGiraffe

Oh wow! That's a great idea!! Thanks for the tip! Will implement! Cheers!

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