Skip to content
Submitted almost 3 years ago

3 column card component with CSS Grid and Flexbox

caner404•280
@caner404
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I would really appreciate feedback on my implementation of this challenge

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @caneriskenderoglu ,

    I have some suggestions regarding your solution:

    • To tackle the accessibility issues, you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).
    .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;            
}

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative.

    • A hover effect that raises a button UP looks strange. It's not a natural movement to happen.

     border: 2px solid transparent ;/* add it to the .btn*/

    • Remove this html { font-size: 62.5%;}changing base html size. This has huge accessibility implications for those of us with different font size or zoom requirements. There is no need to make it .

    • Add some padding to the <body> or some margin to the container.

    Overall , your solution is good. Hopefully this feedback helps.

    Marked as helpful
    0
    caner404•280
    @caner404Posted almost 3 years ago

    @PhoenixDev22 Thanks for the advice! Especially the solution to the problem with the button hover effect.I will keep that in mind!

    1

Please log in to post a comment

Log in with GitHub

Join 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