Product-preview-card challenge

Community feedback

• 

  Joel•590

  @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 helpful

  0
• 

  Lucas 👾•104,340

  @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 helpful

  0