product-preview-card-component Project

Community feedback

• 

  Pranshu Sahu•770

  @Pranshu-SahuPosted about 2 years ago

  **Hello Timphil, congrats for a new solution! ** -- I think you've a litte issue with the centering that's to evident, body{ display: flex; justify-content: center; align-item: center; min-height:100vh;} Or body{ display: grid; place-items: center; min-height: 100vh; } if you are not familiar with vertical centering watch kevin powell's video

  -- there is an issue with your button, you should use button styles which you have used with your hover effect.

  -- Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> Coded by <a href="#">Timiphil</a> keep it outside of <div class="whole-page">

  I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Rotimi Ishola•100

  @TimiphilPosted about 2 years ago

  @Pranshu-Sahu Thank you so much Pranshu🙏. the centering works, but I couldn't get clearly the button style fixed. can you help me out?

  0

  

  Pranshu Sahu•770

  @Pranshu-SahuPosted about 2 years ago

  @Timiphil

  when you are styling button remove the property 👉 background-color: var(--Dark-cyan)

  instead use background-color: hsl(158, 36%, 37%); this is will do it

  hope it helps, if you need further help feel free to reply to this comment.

  Happy coding

  Marked as helpful

  0

  

  Rotimi Ishola•100

  @TimiphilPosted about 2 years ago

  @Pranshu-Sahu Thank you Pranshu. it works now.

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  Good job on the challenge, If you want to the any type of element vertically and horizontally on the page, can use the following on the parent element:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  On mobile add the following for the image.

  img.desktop-img {
      width: 100%;
      height: 300px;
      object-fit: cover;
  }
  

  and for the background of the text container .text {background: #fff;}.

  Hope these are helpfull

  Marked as helpful

  0

  ---

  

  Rotimi Ishola•100

  @TimiphilPosted about 2 years ago

  @hyrongennike Thank you so much. it works now.

  1