HTML & CSS Productcard Challenge

Community feedback

• Account deleted

  Hello Noellebgn!

  The easiest way to ensure your layout is responsive is to use media query. For simplicity, I would also suggest to use display: grid for creating two-column layout rather than positioning elements with position: absolute.

  Something like this should work (if you remove position: absolute on the textbox):

  .generalbox { display: grid; }

  @media (width > 25rem) { .generalbox { grid-template-columns: 1fr 1fr; /* This simply means "two equal columns" */ } }

  Note that the breakpoint is somewhat arbitrary. For more info on media queries and responsive layout in general I recommend this guide on MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

  I hope this was helpful

  Marked as helpful

  0

  ---

  

  noelliebgn•20

  @noelliebgnPosted about 1 year ago

  Thank for your advice, i'll definitely try this ! @twDevNoob

  0