Responsive three column card using Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Marit,

  Excellent work!I have few suggestions regarding your solution if you don’t mind:

  HTML

  • The attribution should live in the <footer> landmark, the <footer> should be outside the <main>

  • To tackle the accessibility issues: As this is not a whole page, you can add a <h1>with class="sr-only" (Hidden visually, but present for assistive tech).

  • On your buttons, addborder: 2px solid transparent; to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.

  • Code for larger screens is usually more complicated than the codes for smaller screens. This is why coding mobile first helps simplify your code.This approach uses min-width media queries.

  Overall , your solution is good. Hopefully this feedback helps

  Marked as helpful

  0

  ---

  

  Marit•400

  @MaritxxPosted over 2 years ago

  @PhoenixDev22 Thanks for the feedback! I was already wondering about the H1 tag. What properties would I have to add to that 'sr-only' class to make it hidden visually but still show up on assistive technology?

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Maritxx

  You’re welcome .

  For your question , Sorry I did get what you mean by what properties?

  What I meant is using <h1 class=“sr-only“>…</h1>before the the component.

  Hopefully this make it clear

  0

  

  Marit•400

  @MaritxxPosted over 2 years ago

  @PhoenixDev22 No problem! I've been told I'm quite unclear when I'm asking questions. Sorry!

  What I meant was, the class of 'sr-only', what do I add to this in CSS to make it hidden for everyone bar assistive tech? Is this 'display: none' or 'visibility: hidden', or is sr-only by default already doing this without having to classify anything in CSS?

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Maritxx No problem at all. There it is

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important;  /* 2 */
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            /* 3 */
  }
  
  

  You can find it here

  Happy coding !

  Marked as helpful

  1