Design comparison
Solution retrospective
I couldn't make the "connection" of the two divs in the desktop design. Does anyone know how I can do this? My project is like this It was meant to be
Community feedback
- @dostonnabotovPosted over 1 year ago
Hi, there! 👋
Congrats on completing the challenge. I inspected your code a little bit and here's solution to your problem with the "connection" along with some feedback:
- Wrap the
<section>
elements in another<div>
element. Give it a class name, like "result-summary" - Move your
<main>
CSS styles to that<div class="result-summary">
- Done!
Also, it's highly recommended not to use
id
as a selector in your CSS. Stick with class names.Last, but not least, I recommend you check out the way Kevin Powell did this challenge. I bet you'll learn a lot of cool stuff from him.
Good luck on your coding journey!
Marked as helpful0 - Wrap the
- @JagholinPosted over 1 year ago
Good job! I only have 1 suggestion:
- people usually use class selectors, not id selectors in CSS. Here it doesn't really matter, but having class selectors allows for easier reuse of styles(
id
s have to be unique, classes do not).
To fix your boundary between the 2 sections all you have to do is move your border-radius and box-shadow properties from
#score
tomain
Marked as helpful0 - people usually use class selectors, not id selectors in CSS. Here it doesn't really matter, but having class selectors allows for easier reuse of styles(
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