Submitted about 4 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

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
@ApplePieGiraffePosted about 4 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)! 😁
1
Artem Ponomarenko•365
@ArtemPonomarenkoPosted about 4 years ago
@ApplePieGiraffe

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

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