Design comparison
Community feedback
- @grace-snowPosted almost 3 years ago
Hello
I'm afraid there's some invalid html in here. You can't have a h1 inside an anchor tag. Swap these around, put the anchor tag inside the h1 and that should be fine
There should be no text in a div/span alone. Always use meaningful elements. For the date you could use the
time
element (make sure you include thedatetime
attribute on it).The share content seems to be active (visible) on page load at the moment, so that should be swapped.
On mobile, the share content doesn't look right when it's visible (doesn't look like the designs, still has the down arrow pseudo etc)
Here are some tweaks I just made in browser to improve the position of the share content on desktop. I've mad the card footer position relative and aligned to that instead. This means the share content will never be positioned off screen to the side, kind of a suggested enhancement on the design..
.share-option { /* bottom: calc(100% + 28px); */ /* padding: 17px 40px; */ /* -webkit-transform-origin: bottom; */ /* transform-origin: bottom; */ /* margin-right: 5px; */ top: -3.75rem; padding: 1rem 1.5rem; right: -2.5rem; } .share { /* position: relative; */ } .profile-footer { position: relative; } .share-option::after { /* left: 50%; */ right: 2rem; } .share-button { /* height: 1.8em; */ /* width: 1.8em; */ /* padding: 8px; */ height: 1.8rem; width: 1.8rem; padding: 0.5rem; display: flex; align-items: center; justify-content: center; note: why is this getting an active class when the share content is not visible? That is very counter-intuitive.; } .container:hover .banner { /* -webkit-transform: scale(1.1); */ /* transform: scale(1.1); */ note: this is horrible ! Don't add hover effects unless something is interactive;; } body { overflow-x: hidden; } .share-button img { max-width: 100%; }
Marked as helpful1@SlimBloodworthPosted almost 3 years ago@grace-snow oh no don't be afraid! Thank you! Your feedback is just what I am looking for! This is valuable information and I really appreciate the coding explanation and example!
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