Responsive 3 column preview card component using CSS Grid/Flex

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Liam! 👋

  You have used the correct font family based on what I see.

  Some suggestions:

  • Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
  • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
  • Alternative text should not start with "Icon of" or "Image of". It is already an image element (<img>) so the screen reader will pronounce it as an image.
  • For the border radius of the cards, I recommend setting it on the parent element of the cards. Then, on the parent element of the cards, set overflow: hidden. Doing this will prevent you from setting the border-radius on different card whenever the layout is changed.

  I hope you find this useful. Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  @vanzasetia Hi, Vanza, thank you for your suggestions. :)

  I normally know not to use more than one h1 in my pages but I think this time I overlooked it during the making process, thank you for pointing it out!

  I'll take the rest of your suggestions on-board for sure, I did not think about the type attribute so thank you for the source. :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @YorkieLT

  You are welcome! 👍

  0
• 

  lemonsprig•40

  @lemonsprigPosted over 1 year ago

  The button is only shrinking and becoming round when the cards become very small, and the container goes below max-width of 375px you set. The button has a max-width of 63% of the card. There may be better ways to do this but a few options I can think of.

  1. give the button a width instead of max-width
  2. Leave the button with a max-width but stop the card from shrinking below a certain size and accept that its just not suitable for really small screens.
  3. Allow the card and to shrink furthert, but use some other media query to modify the button, perhaps width 100% smaller font, less padding etc.

  Personally I would lean towards option 2. Phones with screen sizes less than 375px are decreasing the majority seem to be in the 412-414px range or at least thats what google tells me.

  Hope that helps.

  Marked as helpful

  1

  ---

  

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  @lemonsprig Thank you for the suggestions, I agree with option 2 as well, I tend not to really style for anything smaller than 375px like you mentioned as most phones tend to be that size or bigger and depending on the layout of the website it would just look horrid as it shrinks more and more.

  When I ever have to accommodate smaller screens than 375px I would try option 3 to modify other elements with media queries like you mentioned. :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @YorkieLT @lemonsprig

  You should not ignore the fact that there are still users who have a phone with less than 375px. Not to mention desktop users are able to increase the zoom level up to 500% which can reduce the screen size up to 320px—may be even less depending on the users' device screen size.

  Also, desktop users are able to resize their browser's windows. The possibilities are endless.

  It is also the standard of Web Content Accessibility Guidelines to ensure the site still working to at least 320px width.

  Understanding Success Criterion 1.4.10: Reflow | WAI | W3C

  1

  

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  @vanzasetia Thank you for the source, Vanza. I may reiterate I would not simply ignore sizes smaller than 375px, I would modify sizes as low as 320px until I would probably have to seek advice on making a design like this challenge equate smaller than that.

  I would like to see how someone could design this challenge smaller than 320px as I imagine you would have to completely change from the original design? :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @YorkieLT

  You don't need to have a different design. You only need to make sure that the cards shrink to adjust based on the user's screen size which you have done it anyway.

  By setting a max-width on the .container, you allow the cards to shrink while still preventing them from getting too large. So, your site is already good. 👍

  1
• 

  lemonsprig•40

  @lemonsprigPosted over 1 year ago

  Nice work on this, one thing I would consider looking at is when you resize the screen and you hit the first breakpoint and it flips to a coumn, the whole cards are stretched out. This may be by design, but it might be worth lookin at fixing the width and centering the column of cards. Similarly because of this resizing if you push it too far the button becomes round.

  Marked as helpful

  1

  ---

  

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  @lemonsprig Hi, Lemon! Thanks for taking the time to comment.

  To be honest, I am actually annoyed I didn't notice before submitting but I know exactly what you mean, looking back now I had simply forgot to set a max-width: 375px on the container so that it does not stretch at all until it hits my break-point, that will be why it is stretching!

  As for the button becoming round, might I ask what is a good method on stopping the button from resizing? Thank you. :)

  0