Responsive page using CSS Flex-Box

Community feedback

• 

  Klara•270

  @klara367Posted about 2 years ago

  Hi Hawi,

  I just came across your solution. Maybe you've already found out. But I noticed that the reason you have displayed both backgrounds (mobile and desktop) on the screen, is that you put the mobile background to the .social-proof and then the desktop background to the body. So it displays both backgrounds. If you just move the mobile background from the .social-proof to the body, it should work.

  Also, if you want two background images to be placed on different spots, you can write position for each one and separate it with comma, like this:

  body {
     background-image: url("./images/bg-pattern-top-desktop.svg"),url("./images/bg-pattern bottom-desktop.svg");
     background-repeat: no-repeat;
     background-position: top left, bottom right;
  }
  

  You can check it out here

  Hope that will help.

  0

  ---

  

  Hawi Girmachew•250

  @HawigirmachewPosted about 2 years ago

  @klara367 Thanks. I will try it later.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @Hawigirmachew, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Hawi Girmachew•250

  @HawigirmachewPosted about 2 years ago

  Thanks @correlucas. I will use html markup and semantics for my next project.

  0