Design comparison
Solution retrospective
Open to absolutely any and all feedback, if something I did was absolutely dumb, I would love to know :)
Tried to mimic the original as closely as possible, hopefully it turned out okay.
Community feedback
- @DeCaptainDanPosted almost 3 years ago
How did you make sure that it looks exactly like the required design?
1@RobertK0Posted almost 3 years ago@DeCaptainDan Lots of trial and error. Played around with different properties until it look the way I wanted it to. Different widths, margins, paddings, percentages, lots of flex boxes. Played around with max-width and a lot of other different stuff you can see in the source code, until it got to looking good. And it took a loooot of googling and learning. The whole order summary tab here is just a div flexbox — centered horizontally and vertically — and then just width, and the height (individual element paddings and margins) adjusted until the live site preview looked as close as possible to the available desktop-design.jpg.
0 - @DeCaptainDanPosted almost 3 years ago
wow... that sounds great. Can you share your knowledge on the use of percentages and the flex-box? Thanks for your reply
0@RobertK0Posted almost 3 years ago@DeCaptainDan I'm learning as well, so I don't know much yet, but I've pretty much found everything I know through googling and looking through documentation.
Here's a link to some documentation I've found useful. Using that I just play around in chrome dev tools, and modify properties (e.g. width) with random values, and just see what works best for me.
Maybe a fixed 100px width looks odd in mobile view? Let's try 90% (which means 90% of parent element width). Oh now it looks too big when in normal mode? Time to google "how to set maximum width for a css element". Find out about max-width. Add a
max-width
and set it to 100px. Aaand perfect.Just takes a little playing around with to figure it out, can't break it in any case, just undo it if you do. This pretty much sums up my entire process. And it really makes me learn a ton of new stuff.
And for flex boxes this link is a handy resource to better understand them. I use them for pretty much everything. Just put everything in a flexbox, open up chrome dev tools and play around with it, and if nothing works the way I wanted it to, it's back to googling. Learning how to google for proper results is an important skill to have anyway, sooo... :)
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