Design comparison
Solution retrospective
This is a tricky challenge. I used flexbox and CSS Grid. I also used pixel perfect cause I'm not a pro member yet(I should be soon). This is 98% like design image provided.
Aligning the contents to design spec without a figma is kind of difficult unless you want to use position property for most of the contents which will be a bad idea.
found any issues? Please let me know how to correct it and I will plus you'll get 20 points(same as I'm getting for this project). Thanks!
?* Fixed my overflow issue today (Masked it with "overflow-x:hidden;" before but now fixed it). Found that using percentage for containers while using vw for children will still cause overflow and may even be a bad practice. So I changed all child elements' width units from vw to percentage.
Community feedback
- Account deleted
This comment was deleted 8 months ago
0@ifarontiPosted 11 months ago@MrSandeepSharma
Are you sure this comment is for my solution?
"Aligning the contents to design spec without a figma is kind of difficult unless you want to use position property for most of the content which will be a bad idea" - That's my view of using positioning too much even though there's absolutely nothing relatively wrong with sticking contents in a fixed area of document with CSS position property as long as it allows your layout be how it should be(I spent months on this forum learning positioning from everyone helpful and falling prey to its limitations till I tamed it enough).
body{ margin: 0; padding: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; background-color: black; } @media only screen and (min-width:320px) and (max-width:860px){ body{ display: flex; justify-content: center; align-items: center; background-color: #FEFDF9; }
I'll like to learn from you, do 3 or two challenges so I can be a student of your brilliance. Thanks but this isn't helpful for me. My issue is an overflow I can't find where it's coming from. I've changed from VW to % and no luck So I used overflow-x: hidden; which causes jerky vertical scroll sometimes. Other than that, I think my solution is very good. Thanks!
0Account deleted@ifaronti Hello my dear friend, I didn't wanted to hurt you and I'm really sorry if I said anything wrong 👏👏
As you said above, first I have to complete some challenges so here is my first solution, hope you like it my solution 😃😃
0@ifarontiPosted 11 months ago@MrSandeepSharma
I'm not hurt in anyway just annoyed that a genius won't offer help but point at non-issues instead of showing me a better way.
From your solution, I can't see how minimal use of position property helped your layout. Also, if you check my CSS, you'll see that some positions relative were declared without specifying units. I always declare position property for my containers. I could use margin instead of position but I prefer to use position if I'm adjusting containers and margin when dealing with contents within containers(I don't strictly follow this rule but I'm trying to). Your solution is aiii. But mine is still better.
Check my readMe.md file, you'll see that I specifically stated that I'm getting to a stage where I don't have to use position unless absolutely necessary. I tried it with some containers in this solution and it made my transition to mobile layout very fast and super smooth. I'm on the same page as you when it come to position but there's nothing wrong with using position; it just makes responsive layout more time consuming and may cause overflow(margin can too).
Pick a CSS intensive project, let both of us work on it and compare solutions ? deal?
0
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