Social proof section | HTML CSS

Community feedback

• 

  Artur•145

  @arturpawlowski5Posted over 3 years ago

  Hi Raquel,

  Really nice work. I just made this Challenge so I have some suggestions.

  1. Try to put Rating Descriptions in extra DIV

  <div class="rating__description"><p>Rated 5 Stars in Reviews</p></div>

  This way you will have more control over this Rating when you switch to Mobile. In mobile Description should be under Stars.

  2. Try to put Footer inside .Container.

  <section class="title">
  <section class="reviews">
  <section class="footer">
  

  Try too add Flexbox - with column direction to .Container after that.

  .container {
  	flex-grow: 1;
  	width: 88%;
          display: flex;
          flex-direction: column;
         align-items: center;
         justify-content: center;
  }
  

  This way you will have all 3 main Sections in .Container and you can manage better how hight is each section.

  I think after that you can try to Delete this from .Body

          display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  

  Right now I see your Desing on Big Screen but it is small and more to the top of Viewport.

  Try to work how your Design works on Different Sizes of Screens.

  Hope this help little with your project.

  0

  ---

  

  Raquel Gruppi•20

  @RaquelGruppiPosted over 3 years ago

  Hi, @arturpawlowski5 !

  Thanks a lot for your feedback!

  The idea of having foot outside of the div container is to keep the attribution at the bottom regardless of the size of the screen.

  I coded the desktop design to 1440px and tested if it was responsive from mobile up to 1680px. Would you mind telling me the size of your screen, which the design was small? So I can try to fix it.

  0

  

  Artur•145

  @arturpawlowski5Posted over 3 years ago

  Hi, @r-gruppi,

  I work on 1920x1080 right now and it just looks a little smaller than I think it should.

  0