Design comparison
Solution retrospective
How do I learn how to make my sites responsive using media query
Community feedback
- @frank-itachiPosted over 1 year ago
Hello there π. You did a good job!
I have some suggestions about your code that might interest you.
HTML π:
- Wrap the page's whole main content in the
<main>
tag. - If your code has different sections that have a specific purpose like a navigation, article, sections or footer, itβs a good practice to enclose those parts with HTML5 landmarks.
For example, you could use a
<footer>
tag to wrap a footer section. - The heading order is important in the html structure so try to always start your headings with an
<h1>
tag and then you can decrease by one if you need to use more heading in your html code. - Since the mobile design has a different image, you can use the
<picture>
tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here
I hope you find it useful! ππ Above all, the solution you submitted is greatπ!
Happy
<coding />
π!0@bella019Posted over 1 year ago@frank-itachi Thank you very much for this great advice.
0 - Wrap the page's whole main content in the
- @tweetandcodePosted over 1 year ago
Hi, I'll try to get you started in a simple way. open your css file and add this body { background: white; } @media screen and (min-width: 768px) { body { background: red; } }
resize your browser to <= 768px to see the body go to white and >= 768px to see it become red.
also remember this. min-width means if the screen is atleast(>=) that width, apply the css inside. max-width means if the screen is atmost(<=) that width, apply the css inside
and place your media queries in the end.
This should get you started. .
0@bella019Posted over 1 year ago@tweetandcode I am currently studying on this. This makes a great head start. Excited to apply to my next work
0
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