@NitheeshKumar-C
Posted
Hi there ๐,
You can fix it by removing justify-content: center
from body
element๐.
Happy coding โ.
Nitheeshkumar
Looking to hire developers?
@NitheeshKumar-C
Posted
Hi there ๐,
You can fix it by removing justify-content: center
from body
element๐.
Happy coding โ.
Nitheeshkumar
@paridhi3
Posted
Thank you for the pointing out the slips I made! I am grateful for your detailed solution. Will continue to improve as I practice. :)
@PhoenixDev22
Posted
Hello @paridhi3 ,
I have some suggestions regarding your solution:
There should be two landmark components as children of the body element - a main
(which will be the component) and a footer
(which will be the attribution).
For any decorative images, each img
tag should have emptyalt=""
and aria-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>
with class="sr-only"
(Hidden visually, but present for assistive tech). Than you can use <h2>
instead <h1>
.
.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;
}
You should use em
and rem
units .Both em
and rem
are flexible, scalable units, Using px won't allow the user to control the font size based on their needs.
border-radius
and overflow hidden
to the container that wraps the three cards.so you don't have to set it to individual corners
For a responsive full page height, set the body element min-height
to 100vh
.
body { min-height: 100vh; }
you almost never want to set height
, let the content define the height.
Never use px
for font-size.
Hopefully this feedback helps .
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