Design comparison
Solution retrospective
Need help in setting page width for desktop and mobile.
Community feedback
- @JetyunPosted over 2 years ago
-
For mobile, maybe you want to set the container width to be smaller than 350px, because in the design, it seems that there is still some space to see the light blue background color due to the design smaller width.
-
For desktop, you can put @media screen and (min-width: 1440px){} and put the css setting in the curly bracket. When you use F12 and amend the screen width to 1440px, you will see the changes. This is called media query. maybe you want to watch youtube dave gray tutorial on media query to learn more.
- in addition, I think you accidentally insert the paragraph into your footer.
- If you want to you can delete the style tag in HTML and put the .attribution css styling into css file. This is not wrong, but I think it would be a hassle to look for the css styling in future if the styling is not all included in the CSS file (Other challenges may require you to wrote a longer CSS file)
Marked as helpful0 -
- @DavidMorgadePosted over 2 years ago
Hello John, congrats on your first Frontendmentor challenge!
In this case seems that your component is already responsive, but for future and larger projects I would recommend you to use relative units such as rems / % instead of pixels, also try to use a reseter stylesheet such as normalize, that will help you reseting the default styles of the browser, like the
body
margin
. You can get normalize hereFor next projects try using a bit more semantic tags, like
main
,section
andfooter
, in this project since is a little component in not that important, but it can help you a lot for your future projects!Hope my feedback helped you!
Marked as helpful0
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