Design comparison
Solution retrospective
This challenge was given to me with difficulty. Somehow I was able to repeat it, but exactly what to repeat, and not fully to make up. The CS code is terrible, it's even possible that some properties repeat each other. Nevertheless, I will be glad of any feedback
Community feedback
- @sulemaan7070Posted almost 2 years ago
hey @ilvdrskn😄, congratulations on completing the challenge here are a few suggestions to make your site better..
1.Firstly the padding
padding: 2em 5em
on the button looks massive you can reduce that.. or if you are comfortable with pixels just go with pixels..2.On the
.modal-menu
use the property of fixed like this, this should keep the menu on the screen even when scrolling happens...modal-menu { position: fixed; }
3.the
padding-left: 10em;
on themain.main-info
is pushing the box more than design..you can reduce that..4.As for the
.picture
div you can use the property ofbackground-size: contain;
to display full image..Hope that helps, Happy coding💯🔥👍🏻
Marked as helpful1@ilvdrsknPosted almost 2 years ago@sulemaan7070 Thanks for the advice, Minato! But I have questions about the background: if I change to contain, then on a mobile device it will float away with a decrease in the screen, but I have a fixed flex-basis, which is why between .text and .picture there is an empty space. How can this be fixed? And what can be said in general about the structure of an html document? Did I make it valid?
1@sulemaan7070Posted almost 2 years ago@ilvdrskn when I removed the padding:10em and made the picture
object-fit:contain
..and checked on the mobile.. it seemed okay.. give it a try.. and as for thefooter
you are using only 60% of its width on the mobile version also.. use 100% of footer width and reduce image sizes to fit them in a lineMarked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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