Design comparison
Solution retrospective
I was wondering how to get rid of the space between the top text and the bottom text. I also had questions about best practices and if I organized my HTML correctly (having two "p tags" be the separate lines of text).
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
CSS ๐จ:
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove thewidth
property with a percentage value.
CSS Reset ๐:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0 - Use semantic elements such as
- @StormKing969Posted about 1 year ago
For the best coding practice, I'd take a look at this link and as for the issue about the space between the top text and bottom one, you'll have to make the margin of the first text to be 0 instead of none or something like this
.container > .header{ margin-bottom: 0px; }
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