Design comparison
Solution retrospective
Curious to know why the mobile says 375px, and I did just that.
Unfortunately I still get a desktop version on my mobile phone.
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Aijalon, congratulations for your solution!
To apply changes and reach the mobile version layout, you need to set a media query saying which properties you want that changes depending on device or screen sizes.
I saw that at this point you've build the solution for desktop, not mobile, so in order to see the component changing you've to set the media query.
If you're not familiar to media query, see this quick guide to learn about: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I'll give you one example of media query, where your container changes the flex-direction after 500px. See the code below:
@media (max-width: 500px) { main { flex-direction: column; }}
Note that inside the media query is indicate the only thing should change after 500px.
Hope it helps, happy coding!
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