product preview card solution

Community feedback

• 

  Pirate•170

  @ima9ghPosted 5 months ago

  Hello there!

  𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

  I have a suggestion to improve your challenge!

  ●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

  body{ 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  box-sizing: border-box;
  background-color: hsl(30, 38%, 92%);
  }
  

  ●To make it responsive from :

  You should find the size of fonts and other items in smaller sizes to avoid cluttering your project!

  𝗧𝗵𝗲𝘀𝗲 𝘀𝗶𝘇𝗲𝘀 𝗺𝗮𝘆 𝗯𝗲 𝘂𝘀𝗲𝗳𝘂𝗹 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗵𝗲𝗶𝗴𝗵𝘁 𝗮𝗻𝗱 𝘄𝗶𝗱𝘁𝗵 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  @media screen and (max-width: 400px){ 
   .container{
   height:300px;
  }     
  picture .image{
      height: 300px;
      width: 170px;
  }
  }
  
  @media (min-width: 500px){
  .container{
      height:340px;
  }
  picture .image{
      height: 340px;
      width: 200px;
  } 
  }
  

  Let me know if this comment was helpful.

  𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

  Marked as helpful

  1

  ---

  

  gayathri-v1•170

  @gayathri-v1Posted 5 months ago

  Hello @ima9gh , Thanks a lot for the feedback! I really appreciate your time for checking my code. I used your suggested code, when I resize the screen the contents in the div does not get overlapped now :) (which the issue earlier) , but mobile view is not working. flex-direction:column; is not working now.

  0
• 

  Putri Mila•80

  @ycezzPosted 5 months ago

  try using :root to save color and font variables, to avoid mistakes in using colors or using fonts

  1

  ---

  

  gayathri-v1•170

  @gayathri-v1Posted 5 months ago

  Hello @ycezz, thanks for the suggestion. I will use this in my future projects.

  0