responsive 3 column preview card using flex box

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello obinneji,

  Congratulation on completing another frontend mentor challenge.I have some suggestions:

  • Wrap the body content in <main >tag .

  • Whenever you include interactive elements(links , buttons , inputs , textarea ), make sure you include clearly visible focus-visible styles .

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

  • 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;            
  }
  

  To read more .

  This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

  • You can simply wrap learn more in an anchor tag no need for a <p> and <div> tag .

  • Css:

  • No need for position : absolute; for the the container.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs.Never use px for font-size

  • Instead of giving border-radius to the two cards, I would suggest to give overflow:hidden; and border-radius to the container that wraps all the cards .

  • You forgot ; in order:1 .

  • No need to repeat learn more styling three times , the three classes shares most styling , use a reusable card class on all 3 ones.

  • Give each card a class with this

  
  {display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  

  • Set everything inside the cards to have some margin in one direction margin- bottom . Only the btn wont need it and instead give it margin-top: auto; because this is a flex column, margin top auto will push it to the bottom of the cards.

  I really hope this feedback helps . Keep coding

  00

  Marked as helpful