Four card feature section

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The desktop layout I think looks fine, could use a more lesser gap between each of the card so that it will look close on the design. The site is responsive though another idea to create is to have a 2x2 column, this way, at mobile state it has a single column, for tablet it will have the 2x2 and the desktop state, because if you go to at size 780x, you will see that the 2 middle card are squished. Mobile state looks fine though you will see that the first card doesn't match the 3 card's width.

  Here are some other suggestions for the site:

  • Always have a main element to wrap the main content of the site. For this use main tag on the .wrapper selector.
  • You could change the section tag that wraps the 4 card since section is not informative as landmark elements. You can however use it especially when there is already a dedicated visible heading tag on that section/part of the layout where you will use it.
  • Change those other h1 into just h2. Remember that you should only use a single h1 on a page but not always the case especially when you are going to use h1 on either article or section since it will be treated as increasing heading tag level.
  • Adding an extra aria-hidden="true" on each of the card icons so that they will be totally hidden for screen-reader.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Mahnoor Khan•455

  @mahnoork18Posted almost 3 years ago

  @pikapikamart thankyou so much for such detailed suggestion I will surely work on it.

  1