Hi everyone! I have struggled with some parts of this challenge, specially with the positioning of some of the overlapping elements. I had some issues with the desktop version of the challenge since a white space was showing up on the right side of the screen. I managed to "fix" this applying overflow-x: hidden; in the body tag. I can't figure out why this was happening and my code might show some problems adapting to different screen sizes. I would appreciate some feedback on these issues. Thank you!!
Isaay
@jakubserwinAll comments
- @LidiaRJSubmitted over 3 years ago@jakubserwinPosted over 3 years ago
You definitely misplaced your solution or attached wrong file but its ok.
The problem with the white space on the right side was probably because one or more of your elements had fixed width and was overflowing your body. Your solution manage to hide it but probably cut it as well. For testing purpose you could add a red border for your body and take a close look which element will extends it.
0 - @kdotelleSubmitted over 3 years ago
What other ways can I add validation to the form?
@jakubserwinPosted over 3 years agoYou can research regular expressions for validating not only email address but other fields like for example if password includes numbers or special characters etc.
0 - @suraj-singh127Submitted over 3 years ago
I know this looks really bad. But, here it is. I really would like some advice and probably some tips on how make it look better and more exact as compared to original design.
@jakubserwinPosted over 3 years agoI agree with palgramming the only think you can change is the box shadow of your cards. The soft approach in provided design looks better.
1 - @agusthasSubmitted over 3 years ago
This is my solution to the challenge. There's some problem I encountered while finishing this challenge (mostly CSS 😢).
- My approach on the share button tooltip was to create one HTML element and change to whom it absolutely position based on the screen size. I was thinking it will create a cleaner HTML but in CSS it create a whole new mess since i must know which parent and which child is it 🤕 . Is it better to just create two different tooltip (even though the content is nearly the same)? One for mobile and one for desktop?
Any advice on that or other things is much appreciated 🙏. Keep on coding! 🤟
@jakubserwinPosted over 3 years agoHi, you've done really good job. I took a look at your code and could learn some cool stuff too. Keep it up :D
You could think about using different scss files for your variables, mixins and global styles like the 7-1 Sass pattern but in more simplified version.
In JS if you have only 1 line of code after if/else statement you can remove brackets.
And maybe use HTML Semantic Elements instead of divs with classes like footer and header.
0