Design comparison
SolutionDesign
Solution retrospective
help me write the media querie for the small screens and help to make it responsive
Community feedback
- @MelvinAguilarPosted 12 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Wrap the page's whole main content in the
<main>
tag.
- In this challenge, it's not necessary to use media queries for responsiveness. You can directly apply styles like
max-width: 400px;
to the component. The only issue I see in your solution is that you have inline styles in your HTML (style="width: 22rem; height: 34rem;"
), and these inline styles take precedence, potentially overriding all styles from your CSS file. Be cautious with inline styles as they can interfere with the external style sheet.
- Maintain a clear heading hierarchy, starting with <h1> and progressing through levels (<h2>, <h3>, etc.). Source ๐
I hope you find it useful! ๐
Happy coding!
Marked as helpful0 - Wrap the page's whole main content in the
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