Huddle Landing Page

Community feedback

• 

  Nishkarsh Dubb•165

  @Nishkarsh01Posted over 3 years ago

  I saw your front-end challenge and the issue you were facing, and I created a pull request to help you understand.

  I updated the Html and CSS Code a bit in order to make the webpage responsive below 720px;

  1. I created a div with class .center to wrap & center the entire content.
  2. Apart from that I made use of relative units of measurement using % and rem.
  3. When the viewport width hit 720px I changed the flex-direction of the flex-container (.container) to column and accordingly adjusted the width of the mockup image.

  1

  ---

  

  Nishkarsh Dubb•165

  @Nishkarsh01Posted over 3 years ago

  @Nishkarsh01 you could expand on the idea and make your code better.

  Also, try and learn about:

  1. Using comments in HTML and CSS.
  2. Separation of Concerns in HTML and CSS.
  3. Learn more about relative units of measurement in CSS like rem, em, %, vh, vw, etc.
  4. Learn about utility classes and reusability of code.
  5. Also try and avoid repetition of code.

  1

  

  pierre-pellegrino•970

  @pierre-pellegrinoPosted over 3 years ago

  @Nishkarsh01 Hey ! Thanks a lot for your answer !

  I am reading what you changed on the pull request. As I am really a beginner I don't understand everything at first reading but I'll be working on it until I fully understand.

  1. I didn't know about this .center technique, as I understood it includes the whole page, so you can setup a responsive behaviour more easily ? It seems really nice, I will give it a try ASAP.

  2. I'm also surely giving it a look, I don't know how to use them properly, still need to practice !

  3. Wow, I thought what I was setting up when viewport width was below 1250px automatically applied in my @media screen and (max-width: 720px) media query !

  Once again thanks a lot, it will really help me to improve !!

  0