Product Preview Card made with CSS Grid

Community feedback

• 

  Leo•440

  @SouiciaPosted over 2 years ago

  Hello Jasmine,

  First of all, congratulations on your first completed project (just finished my first one too).

  For the website to adapt to screen sizes, you should define a max-width in the media query, such as: @media screen and (max-width: 500px) {your code}. This code means that once the screen reaches below 500px, it will apply the changes you wrote in the media query. The min-width option does the opposite, so when the screen reaches above a certain px value, the changes will apply.

  For CSS grid, you want to target the biggest parts of the website. For example, in this website, there are two main parts: the picture, and the info about the product. To target those two parts, you should do: display: grid; grid-template-columns: 1fr 1fr; If you select a specific width for this container, like 600px, 1fr will be counted as 300px, thus, each main part of the container will have a clear width. You may as well declare the height as auto for it to automatically adjust to the height of the main parts. By doing all this, when you resize your page, the two main parts will have identical width and height.

  Some further tips: You can write content in div without having to declare a <p> nested to it. such as <div class="price> $149.99 </div> and write all the style in the div class. That decreases the amount of classes you will write and improve legibility.

  If you want to learn more CSS, look for Kevin Powell (https://www.youtube.com/kepowob) on Youtube. He is a great instructor and really good at CSS.

  Marked as helpful

  1
• 

  Chisom Ogbonna•380

  @MavreonPosted over 2 years ago

  Hello Jasmine, congratulations on completing this challenge 👏 Check your html code, in the head section for this line of code <meta name="viewport" content="width=width-device, initial-scale=1.0">... Then make sure you have your media query set up and in it change flex-direction: column if you used a flex box or grid-template-columns: 1fr if you used grids. Tweak the other elements to your linking... If you still don't get this, I could share my solution to thus challenge with you... Happy coding 👏🎊

  PS: Oh it seems you've fixed it, imma just leave this here

  1
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @arajasmine, you usually use flex property. many issues in your project. keep it up.

  1

  ---

  

  Jasmine•30

  @arajasminePosted over 2 years ago

  @afaiz-space Thank you for the feedback! I'll check out flex property and learn it.

  0