HTML5, CSS3

Community feedback

• 

  Adedayo•200

  @pleasantvikPosted almost 3 years ago

  Hello Luiza, congratulations on submitting your solution to this challenge

  Your design looks great on desktop, however it is not responsive on mobile.

  Looking through your code, you place the 3 column card in a div of class "content-ctr" which was displayed as flex in the desktop version.

  You however changed the display back to block in the mobile version

  .content-ctr {
      display: block;
      height: 1400px;
      width: 280px;   
  }
  

  Try changing the display back to flex in the mobile media query and add flex direction: set to column

  .content-ctr {
      display: flex;
      flex-direction: column 
  }
  

  It will stack the card on one another.

  You can also try placing each of the card in an article tag in the html for semantic purpose, instead of using div with no semantic meaning

  Marked as helpful

  0