Design comparison
Solution retrospective
Hi everybody.
I have a problem with the responsive between 1228px and 800px. My blocks are going to the right instead reducing as I set with 60%...
In the mean time I don't understand why my body height doesn't fit with content...
Any advise ?
Thanks ;)
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello GrischK ,
I have some suggestions regarding your solution :
-
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. -
swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right
-
you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech). Than you can use<h2>
.
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
-
To make the component perfectly in the middle of the page, you can make the body element as a flexbox container.(no need for position )
-
border-radius
andoverflow hidden
to the container that wraps the three cards.so you don't have to set it to individual corners -
Using percentages % for width can cause issuses , consider using
max-width
to the container that wraps the three card. That will let the component grow up to a point and be limited. -
you almost never want to set
height
let the content define the height. -
Add hover effect on the links
"learn more"
. -
Never use
px
for font-size.
Hopefully this feedback helps.
Marked as helpful0@GrischKPosted almost 3 years ago@PhoenixDev22 Hi, thanks for taking time to check my code. That'as helpful ! I will check it out tomorrow to improve it. ;)
1 -
- @GrischKPosted almost 3 years ago
I don't understand why on responsive version my HTML and Body elements are not taking all the page... If you have any advise or solution I would thank you guys ;)
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