Social Proof Section - SCSS / Flexbox

Community feedback

• 

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  Hello Pon,

  Your desktop design looks awesome, However, there are certain style properties for desktop that conflicts with the mobile appearance of your site. The following rules should help you with that :)

  1- You should overwrite the margin property for '.main-section' class as follows

  // this is located inside _midea.scss partial file
  .main-section {
      gap: 4.9rem;
      margin: 11.8rem 0rem;   // <=========  This is the new line
    }
  

  notice that to center the elements inside the main tag, we would set their widths using vw (viewport width) unit to achieve the wanted effect. (see below)

  2- You should set the header tag to take all the available screen width, as follows:

  // this is located inside _midea.scss partial file
  .header-section {
      text-align: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3.9rem;
      width: 100vw;   // <=========  This is the new line
    }
  

  3- You should add the following to your _midea.scss file, to set the width of the div (with a class review )

  // this should be located inside _midea.scss partial file
  .review {
  width: 80vw;
  }
  

  4- You should change the padding for class 'rate', so that it doesn't overflow out of its container element.

  // this is located inside _midea.scss partial file
  .rate {
  padding: 1.5rem 0rem 1.5rem 0rem;  // <=========  This is the updated padding style
  }
  

  5- You should set the width for the author div as follows:

  // this is located inside _midea.scss partial file
  .author {
      width: 90vw;  // <=========  This is the updated width style
      padding: 4rem 0rem 0rem 0rem;   // <=========  The padding should be updated as well
  }
  

  6- You can add some margin for author__container div element:

  // this is located inside _midea.scss partial file
  .author {
    &__container {
       margin-left: 3rem;   // <=========  The line should be added
    }
  }
  

  7- You should also add styles in _midea.scss for testimonial__text paragraph as follow:

  // this is located inside _midea.scss partial file
  .testimonial {
     &__text {                            // <=========  The line should be added
        padding: 0rem 3rem;   // <=========  The line should be added
     }                                         // <=========  The line should be added
  }
  

  This should fix mobile and tablet designs. Hope this helps :)

  If you have any questions, don't hesitate to ask.

  Have a nice day :)

  Marked as helpful

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @Ahmed96Mah Hello, Ahmed, how are you?

  Thank you so so much! This is an amazing helping instruction. I have a lot of doubt of making mobile and smaller version with responsive design.

  And this helps a lot to let me know how I could improve the design. 🙏🏻

  For further challenge work, do you have any recommendable resources that can help me to learn more about responsive design?

  Thanks for help 💛

  0

  

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  @ponhuang

  Your are welcome :)

  If you have any other questions regarding the design, don't hesitate to ask, and I will try my best to help you.

  • For a general reference to HTML, CSS & JavaScript, you can checkout Mozilla Developer Network (they have an awesome documentation about everything related to these languages and more) @ MDN

  • There is also @ Udacity, which is an amazing platform to further improve your skills. But fair-warning, they are a for-profit organization. So their nano-degrees could be quite expensive (at least for me). However, I had the opportunity to take their nano-degrees on a scholarship (through a program organized by my country) and it helped me a lot.

  Anyway, these are links for Free courses that are available on their platform (I intend to checkout all of them myself). However, they don't provide certificates of completion (but their nano-degrees does):

  • Responsive Web Design Fundamentals
  • Responsive Images
  • Asynchronous JavaScript Requests
  • Website Performance Optimization
  • Object-Oriented JavaScript
  • ES6 - JavaScript Improved
  • Version Control with Git

  I have already tried the last 3 courses mentioned above, and they were really helpful.

  Note: if you intend to take a free course at Udacity, be sure to check their course perquisites first, so that you could benefit as much as possible from the course.

  Hope this helps you.

  Have a nice day :)

  1

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @Ahmed96Mah Thank you, you are really sweet and nice :) I will take a look of them.

  0

  

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  @ponhuang

  You are welcome :)

  0