Design comparison
Solution retrospective
I couldn't fix a bug relating to spacing of the button upon click on the mobile format. Could someone please tell me how to fix it? Thanks.
Community feedback
- @DudeldupsPosted over 1 year ago
Wow, why are you putting every element into a separate div? It's perfectly fine if you adjust the elements directly, no need to wrap everything.
-
The div for the triangle is probably better off being an
::after
pseudo element. -
Don't declare font-sizes with pixels, use
rem
instead
https://levelup.gitconnected.com/accessible-fonts-please-stop-using-px-for-screen-f0df20efcf8c
-
Use a mobile-first workflow: Declare your basic CSS rules for the smallest screen sizes (from 320px / 20em) up and then use media queries for larger screens (min-width: ??em)
-
Don't use ID selectors in CSS. Those have a higher specificity and let you overwrite things that you probably didn't intend to.
The problem with your share-button can easily be avoided if you just use one button. Give it a
z-index
higher than all the other elements, so this way it stays on top. Then you could show the social icons above the actual content when the user clicks the button, and just hide it afterwards.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