Skip to content
Submitted almost 3 years ago

Responsive 3 Column Preview Card Component

David Oncu•350
@david-oncu
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

Hey Everyone,

I'm open to any suggestions and improvements.

Thanks!

Community feedback

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

    Hello @david-oncu ,

    I have some suggestions regarding your solution:

    .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="" (as you did )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.

    • 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. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button, so it's a good idea to make a habit of specifying the type.

    • In line-height: 2rem;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

    • border-radius and overflow hidden to the container that wraps the three cards.

    • In the mobile layout, there is too much margin on top .

    Overall , your solution is good . Hopefully this feedback helps

    Marked as helpful
    2
    David Oncu•350
    @david-oncuPosted almost 3 years ago

    @PhoenixDev22

    Thank you for such in-depth analysis and suggestions, will be sure to integrate them!

    1
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    And change the background color, the background color given in the style guide file , go Check and then apply the color in your project 😊.

    Marked as helpful
    0
    David Oncu•350
    @david-oncuPosted almost 3 years ago

    @GitHub-dev12345

    Implement both changes! Thanks for the heads up!

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    Marked as helpful
    0
  • David Oncu•350
    @david-oncuPosted almost 3 years ago

    Thanks, Rathore!

    Will be sure to implement it!

    0

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