Responsive News Homepage using HTML, SCSS, BEM
Design comparison
Solution retrospective
Hello, I'm glad I've done this challenge and pretty happy with the experience I've got BUT! I had difficulties with following and I'd appreciate any help on that:
- How to better design those delimeters in the 'New' black box section to avoid so huge spacings between 'New' block elements as mine has?
- As you can see, on the larger screens my very below section has enumeration done with
::before. I was really stuck about how to Implement the counter In It properly so the text content height would be the same as the image one Thanks In advance!
Community feedback
- @ApplePieGiraffePosted almost 2 years ago
Hey there, frontendcracker! 👋
Nice work on this challenge! 👍 Your solution looks pretty good! 👏
In order to make the "New" box look a little more like the design, you should increase the size of the heading "New" and bump up the amount of padding inside the box just a bit. That will get rid of some of the empty space between the blocks of content inside.
For the section at the bottom of the page, I would simply add the number text in the HTML itself (as opposed to using pseudo-elements, which I find to be a bit tricky to work with at times), and layout the text content of each block using flexbox. You'll need to set
flex-directiontocolumnto make the items stack on top of each other andjustify-contenttospace-betweenso that there's just enough space between them and together they fill up the height of their parent container. 😉Hope you find these suggestions helpful. 😊
Let me know if you need any additional help. 🙂
Keep coding (and happy coding, too)! 😁
0
Please log in to post a comment
Log in with GitHub
Join 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