huddle-landing-page-with-single-introductory-section-master

Community feedback

• 

  dgjenni2•320

  @dgjenni2Posted over 2 years ago

  Congratulations on getting the site semi-responsive with the media query. If you're just switching between a laptop screen and a cellphone screen, it should change layouts responsively.

  But, like the comment mentioned above, the next stop to make it more responsive to various cellphone screens, tablet screens and computer monitors would be to change the width from specific pixel widths to percentages. When using a percentage, the element will expand and contract to that percent of its parent's size, and the main body of the page will base its percentage on the size of the screen.

  It may be a bit hard to understand, but there is a free, helpful course that explains a lot about responsive design that you may want to check out. The content is spread over 21 days, but it's thorough with practice and is explained very well. Linked here: https://courses.kevinpowell.co/conquering-responsive-layouts

  Another small bit of feedback is you can have an easy update to your css to make the social icons and the button change when your cursor hovers over them. If you add :hover after a specific css rule, like button:hover or .fa-brands:hover, then the css in the rule will take effect when the cursor hovers over the element. You could change the color / background color or change the opacity of the element to let the user know you can click to interact with the elements.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Dennis Kwame Gyamfi•110

  @DennisKGyamfiPosted over 2 years ago

  @dgjenni2 Thank You for your feedback...I will do just that :)

  1
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Dennis, congratulations for your solution!

  Your solution design is just perfect, all the elements match.

  I've opened your solution in my phone, and isn't responsive yet. Looking your css I realize why, you've set some elements width as width: X value not that when you do thst this element with a fixed with doesn't work in multiple screen since is not flexible/responsive. So you need to replace all properties that are written width in order to have them responsive, for example the container section has a fixed width.

  Fixing that your container elements will have a proper alignment since they can grow/contract.

  Marked as helpful

  0

  ---

  

  Dennis Kwame Gyamfi•110

  @DennisKGyamfiPosted over 2 years ago

  @correlucas Thank You Very much...I will do just that

  0