P
Steven Stroud• 4,100
@Stroudy
Posted
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, @mediashould also be in relative units likeremorem,- 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 helpful
0
Ahmed Eid• 80
@ahmedEid6
Posted
@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
P
Steven Stroud• 4,100
@Stroudy
Posted
@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 helpful
0
