The mobile version looks great but with the desktop one i don't know why I couldn't center the container div, well, it upset me a lot, so if anyone knows why it would be great! Some feedback maybe? Thank you!
Hey @victoriacesar,
Great job on this challenge!
It's responsive and looks great on all screen sizes. To center the div you can add the height: 100vh; to .container in your media queries.
Hope this helps & happy coding!
This is my first submitted solution so I'm grateful for any useful feedback, especially on how to tidy up and simplify my code.
Hey, Lyndsey! 👋
Congratulations on completing your first challenge! 🎉 Your solution is looking good.
On small devices (portrait mode), there is horizontal scrolling caused due to the fixed width given to the img tag and the padding of 50px to the main tag. To fix this issue you can remove the fixed width property and add max-width: 100%; to #hero-image img and then simply replace the main tag padding value to 1em.
Here are few other suggestions:
cursor: pointer to the button tag.id attribute as a selector. I would suggest you use a class selector instead because id's are unique whereas classes are reusable. Check out this resource on the difference: https://css-tricks.com/the-difference-between-id-and-class/background-image to desktop on media queries.relative units instead of fixed. However, it depends on the different circumstances therefore to be clear you can watch this helpful tutorial on when to use different CSS Units by Kevin Powell - https://www.youtube.com/watch?v=N5wpD9Ov_ToHope this helps and Happy Coding! 😊
Hey, everybody! 👋
My solution is definitely not pixel perfect, but I tried to make it look pretty on both mobile and desktop! (I'll make the pixel perfect version very soon) It seems to work ok, I'm just not sure of the cleanliness of my code... Any feedback would be much appreciated!
Thank you and happy coding🤗
Hey, Hoophelie! 👋
You have done a great job on this challenge! 🙌
The site is fully responsive and looks great on all screen devices. Nicely formatted code with semantic tags in use.
There's just a minor issue with an overlay as it does not fully expand to viewport size on a small screen landscape mode. To fix this issue, you can follow these steps:
Add this code to the body tag:
body {
position: relative;
}
Remove width & height property from .overlay class and add the following code instead:
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
And lastly remove height property from a small screen devices with the class name of .landscape-page and add it to the media queries for a medium-large screens.
To fix the accessibility issues, you can simply add a label tag. Learn more about these tag here: https://www.w3schools.com/tags/tag_label.asp
Hope this helps and Happy Coding! 😊
Hello, everyone! I've accomplished this challenge only for desktop resolution, I'm still confused how I can make it for mobile phone size. Should I use media query?
Any advice or recommendation will be highly appreciated!
Hey @Sophia,
Congratulations on completing your first challenge!
I took a look at your site and currently, it's looking great on all screen devices. It's not breaking in any form. However, if you would like to learn about responsive design, you can check out the following resources on CSS Grid, FLexbox & Media queries.
Hope this helps!
This is my first project and also my first time using SASS. Any feedback would be very appreciated.
Hello @munloop,
Congratulations on completing your first challenge!
You have done a great job here. The design almost matches the mockup and looks great on most of the devices. My only suggestion is on a small screen landscape mode, the attribution border touches the card, to fix this problem you could simply add margin-top: 20px to the attribution class.
Your Sass is looking good too, you have grasped a good understanding of features like variables and ampersand. To learn more about other features you can visit this awesome website: Sass
Happy Coding!
Hey, any feedback would be welcome!
Hey @Rwinter88,
Congratulations on completing your first challenge!
Your site looks good, it's responsive and your email validation works fine.
To fix the accessibility issues, you can add a label tag. You can learn more about this here: https://www.w3schools.com/tags/tag_label.asp
Happy Coding!
I don't know how to set hover border width please help me.
Hey @webkingcoder,
To get the desired hover border width, replace the following code:
.help:hover {
border-bottom: 2px solid white;
padding-bottom: 10px;
}
To this:
nav li:hover::after {
content: '';
display: block;
margin: 0 auto;
width: 30%;
padding-top: 0.4rem;
border-bottom: 2px solid #fff;
}
Hope this helps!
Any good practices while writing html or css that I'm not following? Any feedback would be appreciated.
Hey @RohitDhatrak,
Congratulations on completing your first challenge!
Currently, your site looks good but there are couple of things that needs to be added/altered:
1- Use a semantic elements instead of <div> when possible because using semantic elements enhances accessibility, searchability.
2 - <img> element is missing an alt attribute. Always add a required alt attribute and specify an alternate text for an image for better accessibility
Besides that your code looks good and it's easy to read.
Keep contributing your work in this community!
Happy Coding! 😀
I would like feedback from everyone, thank you.
Hey @Ejidike Esther,
Congratulations on completing this challenge!
You have done a great job here, your site looks great on all screen devices. However, there seems to be a few minor issues with regards to HTML and Accessibility which can be fixed easily. You just need to add alt attribute and give a short description in all of your <img> tag.
Besides that your site looks amazing, keep contributing your work to this community.
Happy Coding! 😀
Hello! This is my first challenge using js, any feedback or tip on how i can improve my code will be appreciated. :)
Hey @Deborah Trota,
Congratulations on completing this challenge!
Your site is responsive and it looks great on all screen sizes. You have done a great job on JS part too. The email validation is functioning properly.
Keep up the good work! 😃
Happy Coding!
This one was a lot of fun! Please let me know if you have any suggestions or advice! Thank you ☺️
Hey Vanessa,
Congratulations on completing this challenge!
Your site looks great on all screen devices and you have done a good job using BEM to organise your code.
Keep up the good work!
Happy coding!
