Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive design with SASS and Flexbox

Vasinc Daniel• 190

@Vasinc

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know that your time is limited and important, but it's going to mean a lot if you leave a feedback down below. Thanks

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

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

@gchristofferson

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord