Here is a mockup of a shopping cart that I just made in LibreOffice…
This is an example of what currently has me stumped when it comes to my limited knowledge of Flexbox, Inline-Block, Media Queries, etc.
To be honest, in the past I would have just created an HTML table and dropped in the thumbnails and product details, because the data is very tabular in nature.
But I think I’d get “dinged” by everyone here for choosing an HTML table - especially if I want this to work on mobile.
On one hand, this shopping cart mockup looks like it would work well using the approaches in the links in my OP.
But I think it is more complicated in that because…
1.) I have multiple rows of items - each of which has a thumbnail and product details
2.) Some of the items have descriptions that are just a few lines, but other items have descriptions that extended beyond the height of the thumbnail - which is why I like using HTML tables.
Anyways, I would appreciate some thoughts on the “right” and “wrong” ways to attach a problem like this, before I go too far down the rabbit hole.
(And, yes, I understand that experience is the best teacher, but it also sometimes makes sense to get good advice before you go build a pile of junk!)
P.S. Sometimes what frustrates me is that there just seems to be sooo many ways to accomplish things these days with HTML/CSS. I think having all of these tools/approaches makes it overwhelming as a newbie.
P.P.S. Yeah, @coothead, I am the king of “Analysis Paralysis”!!