Design comparison
Solution retrospective
Hello, I have a question about how to make this site responsive for desktop and mobile devices. Thank you a lot.
Community feedback
- @JoelLHPosted over 2 years ago
Hey, u can use a Media Query, u can set rules that activate when a device screen gets to a specified width. You can learn more in this video: https://www.youtube.com/watch?v=yU7jJ3NbPdA. Good work, happy conding!
Marked as helpful0 - @correlucasPosted over 2 years ago
Hey Daniel, congratulations for your solution!
Answering your question, you can make your code responsive using media queries, you can set breakpoints for the page, for example when the page becomes narrow, example under 1200px width, you set that the flexbox change direction, or the font-size become smaller... is up to you.
Example
@media (max-width: 800px) { .heading { font-size: 24px; }
.card-grid { display: flex; flex-direction: column; } }
This case means that the font will become size 24px and the flex-direction will become column when the page reach width 800px.
Here you can understand how media queries work:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
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