Pool Table FAMILY-1, has models MODEL-600F1, MODEL-600F1
Whereas FAMILY-2, has models MODEL-600F2, MODEL-600F2
I am trying to make it easy to enter new items, so first I did a Table Model CMS with all of the specs that go with it, then a CMS called Tables, which links to that reference.
Not working out so well, when I add the models to the table cms template, it shows ALL of the models, instead of just the ones that belong to that family page.
Secondly, this is on the design side (and you’ll see it if you just go to one of the pool table template pages (not models, just the table)
I need to make a spec sheet with “model name, size, dimensions, weight” etc.
It looks great on desktop, but not so much on tablet/mobile - any suggestions?
Thank you !
For the design part, tables don’t work well on mobile, so instead of using columns you can try using flexbox instead, which will give you more flexibility on controlling the different viewports:
Thanks so much !
On the first part makes total sense
On the second piece I’m actually already using flexbox.
The collection list for the models is in a wrapper and I have 5 divs to house each of the specs.
The headings are in their own wrapper above the collection list.
So my first thought for mobile would be to flex the wrapper vertically instead of horizontally.
Problem there is all of the headings would read on top then the spec data with no heading reference.
Yep, that won’t work because you’ll lose the relation between the item and the headings.
Tables are very tricky, specially in mobile.
To keep the table structure in mobile, I’d play a bit with flexbox child element settings and the table typography size (carefully so it doesn’t compromise mobile readability), or you can choose to use a different approach for this.
One option would be using tabs to display the models and under each tab you’d include the specs. It’s merely a suggestion, design is always subjective
¯_(ツ)_/¯