Applied CSS Grid and media query

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @geekcrasher,

  Awesome job on completing the challenge the only thing I would suggest is to use min-height: 100vh instead of height: 100vh the latter can cause element to overflow outside it's parent container.

  Marked as helpful

  0

  ---

  

  Paulo Lopez•60

  @geekcrasherPosted about 2 years ago

  Hi, @hyrongennike! I'll take note of this one and apply it to the next challenge. :)

  0
• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello Paulo Lopez !

  Congratulation for finishing this project

  I have some suggestions for you :

  1. In your HTML code, you did this :

  <div class="price">
            <h1>$149.99</h1>
            <span>$169.99</span>
  </div>
  

  You can remove the h1 tag for the price which doesn't need to be an h1, you can make it a span, and then make it looks like an h1 using CSS

  .example{
  font-size:18px;
  font-weight:700px;
  color: var(--dark-cyan);
  }
  

  2. There is also a responsive problem (you can watch it using your browser dev tool with F12), your image in tablet view is looking weird, the width and the height of your image is not proportional, which give that flatten image feeling.

  One way to resize an image proportionally while controlling the size:

  #your-img {
      height: auto; 
      width: auto; 
      max-width: 300px; 
      max-height: 300px;
  }
  

  But maybe you will have to make some modification to your code afterward.

  Good job, and keep learning !

  0

  ---

  

  Paulo Lopez•60

  @geekcrasherPosted about 2 years ago

  Hi, @UrbanskiDev! Thank you for your suggestion about the image.

  0