Product Preview Card

Community feedback

• 

  Thodoris-Diamantidis•140

  @Thodoris-Diamantidis

  Posted over 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 :)

  30

  Marked as helpful
• 

  Kate Dames•250

  @funficient

  Posted over 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

  20

  Marked as helpful