How can I make my product items responsive?
Problem:
Cause: I had created a product items list that has made an overflow and I don't know how to size it to where it'll fit within the border.
I've tried display grid and grid-template-column but it still wouldn't work, I'm still kind of new at this and I don't know how to deal with overflow as big as this.
5 Replies
I just want all the products to fit into the border. Also, all the other sections to perfectly align with no overflow (hopefully I'm making sense). 😅
Adding flex-wrap: wrap to your product-list class will wrap the items to next line. You could also add overflow: hidden, this will give you a scroll bar to see other product items
Great thank you!
Don't know if this will help, but I found that putting flex box on both parent and children div causes the content to over flow. So I just make sure I use flex on parent container and then make other elements in the parent inline block.
I’ll definitely try that, thanks!