Design comparison
Community feedback
- @StroudyPosted 3 months ago
Hey, Great job with this solution you should be proud, A few things I noticed,
- At wider screen sizes there is a big empty white space to the right hand side, You can fix that by removing
width: 1440px;
from yourbody
, - Missing a
<meta>
description tag for SEO purposes, - Setting a height and width attribute to your
<img>
will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image, @media
should also be in relative units likerem
orem
,- Using
max-width: 100%
ormin-width: 100%
is way more responsive then justwidth:100%
, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻
Marked as helpful0@ahmedEid6Posted 2 months ago@Stroudy first point the width: 1440px; it given to me by frontend mentor style guide. So I set width for body to 1440px to match the desired design.
0@StroudyPosted 2 months ago@ahmedEid6, The style guide is just that a guide, It is best practice to make it viewable on all screen sizes, You can check this by opening up your solution, Press F12 and look for an Icon on the top left, Looks like a screen and mobile together.
Marked as helpful0 - At wider screen sizes there is a big empty white space to the right hand side, You can fix that by removing
Please log in to post a comment
Log in with GitHubJoin 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