Responsive - Product - Card

Community feedback

• 

  EcePJD•200

  @EcePJDPosted over 1 year ago

  First of all, you can update your solution in the 'Design Comparison' by clicking the 'Generate New Screenshot' (Red - Pinkish button). Second, I didn't see the horizontal scroll bar on your solution (you might've fixed it already).

  Child elements overflow because the overall width / height ( or both) they occupy is more than the width / height of the container resulting to a scroll bar. Based on my experience, even though you set the width and height of these child elements to equal or less than the container's size by using parent-dependent units ( e.g.percentage '%') and the parent element does not have a specified size, it will not apply. You must specify your parent element's size first (e.g. px).

  If incase my analysist about child elements are wrong and you still did not figure how the scroll bar is appearing, you can hide it by setting the parent's overflow attribute to 'hidden'.

  Reference: (overflow)https://www.w3schools.com/css/css_overflow.asp

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have some recommendations regarding your doubts that I believe will be of great interest to you.

  ---

  SUGGESTION 💡:

  • "i don't know why in the design comparison, my solution is different from the actual site ?", Let me share my css snippet which i applied to your solution to help your solution to look same as design, i'm not kidding let me explain.

  ---

  • Add the following style rules to your css file

  ---

  .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
  }
  
  .image-desktop {
    width: 100%;
  }
  

  ---

  • Now remove the display: inline-flex from .container, And i just explain what we done above.

  ---

  • We just used Grid layout like a pro for .container to get a desired output as same as design and applied width: 100% for .image-desktop which helps to cover the image

  ---

  • Now your component will be perfectly look as same as design image as you wished.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  MetalRick•70

  @MetalRick84Posted over 1 year ago

  Hello.

  Wich browser do you use for testing? I reviewed your solution with

  • Opera-devtools: horizontal scroll

  and with

  • Chrome: looks fine

  Maybe its a problem with devtools in Opera

  0