Design comparison
Solution retrospective
Hey guys!
I hit some walls with the columns which I used for the first time in my life. I tried to add a margin on top of the right column, but it only added additional space below the left column, not moving the text down on the right. I solved it by using padding, but I'm quite unsure why it worked and the margin not. Could you help me with that, please?
Also, I used the recommended font styles, but didn't end up with the same letters, which was also the case with my previous task.
Thank you in advance!
Community feedback
- @LeshyNLPosted over 4 years ago
Hey @GuberPeter,
Another good result which looks very much according to the design. Great work for someone just starting out!
You have very creatively used CSS columns to achieve this layout, and while you have managed to make it work in this particular case, CSS columns are not intended to be used for layout purposes in this way. They are purely for displaying text in multiple columns (like they would appear in a newspaper). There's a couple of issues with them that causes them to not be used all that much in general.
You have noticed it for example with trying to add a margin at the top of the second column - CSS columns will have all content start at the top of each column, so the empty space of your margin gets added to the bottom of the first column instead. The padding works, because the actual div is still at the top of the column, you are just adding some space inside of it.
Again, you will want to look into Flexbox and/or Grid in terms of placing different elements onto the webpage where you want them to go :)
Not sure what you mean exactly by not getting the same letters by the way, as far as I can tell, you have the right fonts going on.
Keep up the good work :)
1
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