Design comparison
Solution retrospective
Hello! I have tried to design the product preview card. I have a small doubt. Do I need to make different solutions for desktop and mobile, or both in the same file? If in the same file, I'm just getting started, so I don't know how to make it in the same file, and some helpful tips or resources will be really helpful. Feedbacks are most welcome here. Thank you.
Community feedback
- @Thodoris-DiamantidisPosted about 1 year ago
Hello! Your question is quite valid, and it's a common consideration in web design. To create a responsive product preview card that works well on both desktop and mobile, you can indeed manage it within the same file. A helpful technique is to utilize CSS media queries. These queries allow you to define different styling rules for specific screen sizes. By incorporating media queries, you can ensure that your product preview card adjusts gracefully to various devices.
As you get started, here are some helpful tips to keep in mind:
- Use @media queries in your CSS to specify different styles for specific screen widths. For example, you can set rules for screens larger than a certain width (e.g., desktop) and screens smaller than that (e.g., mobile).
- Consider a mobile-first approach. Start with the styles for mobile devices and then use media queries to add more complexity for larger screens.
- Test your design on various devices and browsers to ensure it looks and functions as intended.
If you found this comment helpfull, feal free to upvote :)
Marked as helpful3 - @funficientPosted about 1 year ago
Congratulations on completing the challenge! To add to what @Thodoris-Diamantidis already mentioned, here is an example of how you might create a media query for a mobile device:
@media (max-width: 785px) { .grid-container { grid-template-columns: 1fr; } }
Use the breakpoints included in the style guide, and simply list all the changes from desktop view (in this case). Typical things that change for mobile view is padding or margins, font sizes, and stack order of components.
The way I approach it is to look at both the desktop and mobile designs carefully before I start anything to see what is different in the layout. This helps me decide whether to use grid or flex for example, or how to structure the page.
Good luck! Hope this answers your question. Happy coding! Kate
Marked as helpful2
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