Responsive design with SASS and Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout is wider than the design, the responsive state could be better since the hero-section's img is really big when it transitioned to mobile state. On mobile state, the text needs to centered and some padding on the bottom would be great.

  Gregg Christofferson already gave a great suggestion on this one, just going to add some as well:

  • Avoid using height: 100vh on a large container like the body tag, as this limits the element's height based on the remaining screen's height. Use min-height: 100vh instead, this takes full height but lets the element expand if needed.
  • Always have a main element to wrap the main content of your site. On this one, .container should be using main instead of div.
  • Always have a single h1 on a page, on this one, the .header should be using h1 instead of div.
  • When wrapping text-content, wrap them in meaningful element like heading tag, p tag or other and not just div. Those div that you used to wrap the text-content should be replaced with p tag if it is just a regular text.
  • The .stats could use a ul element since those are "list" of information about the company website.
  • The img alt could be better since you are making it visible. Using only alt="image-header" does not give any extra information at all about what the image looks like right. So better to make it descriptive :>
  • Lastly, just the responsive state should be looked at.

  Aside from those, great work again on this one.

  Marked as helpful

  2
• 

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hey @Vasinc,

  Nice job using flexbox for your layout! Keep it up!

  Just a couple of tips that might help you get your desktop layout closer to the design: Set a max-width on your .container somewhere in the ballpark of 1440px and use justify-content: space-between. Then set the width of .body and .img-container each to less than 50%. Flexbox will then use the leftover percentage and add spacing between your two containers. Lastly, put text-align: left on your .body container and remove that property from all the child divs. I think if you do this it will get your code to look closer to the design.

  I hope this helps!

  Marked as helpful

  1