Flex-box cards

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this project. Viewing your solution, the desktop design is implemented well. Though there are things you must considered.

  • Wrap the top__block content with main tag for readability
  • Same goes with attribution use a specific tag like footer
  • Instead of using inline style for the image size which is this <img src="images/image-anne.jpg" alt="image-anne" width="48px" height="48px">, for best practice specify it on the css file for example...

  .card__content img {
    width: 48px;
    height: 48px;
  }
  

  • For the mobile use media queries to achieve the responsive design. Here is a good example, and a guide
  • As for the background you can add inside the body ruleset like this...

  #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
  }
  

  Hope this helps and keep up the good work!

  Marked as helpful

  0

  ---

  

  Nazar•90

  @surfruitPosted almost 3 years ago

  @RioCantre Thanks!

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @surfruit ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • Card height is too fixed, I think. You can set it as initial.
  • Background image doesn't fill the screen.

  https://www.frontendmentor.io/solutions/social-proof-solution-bHjGitZ_n

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Nazar•90

  @surfruitPosted almost 3 years ago

  @tymren608 Thanks!

  0

  

  Nazar•90

  @surfruitPosted almost 3 years ago

  @tymren608 Can I message u via TG?)

  0