Update PLP styles
good-idea opened this issue · comments
Let's model the PLP page after the one on The Reformation. (Theirs uses 2 columns, but we'll use 3)
Format should be:
-
3 columns on desktop
-
2 on tablet
-
1 on mobile
-
Image ratio should be square
-
Display title and price below the image:
----------------------------- | | | | | | | image | | | | | | | | | ----------------------------- A title that will go $1000 to the next line
Later we will add some extra info on hover & a "Sale" badge, etc. Also, use CSS Grids instead of flex because later we will be doing some stuff to insert extra content between items
~ ~ ~ ~
Looking good! I think most of the final product images will have a pink background which will make things pop. Also, they won't have the weird serial numbers after the name.
A few more things for now:
- Wrap the entire grid in a div that has a max-width of 900px
- Increase column & row gap to spacing.double or spacing.triple (your best judgement)
- Drop the title font size to h3 and sans serif
- Add padding to the main container - triple on desktop, double on table, single on mobile
Fixed in the latest commit for pdp-styles branch - sorry thought i was only PLP lmk if you want me to go fix them or merge them to PLP branch
I merged #15, and added some more todos to the issue description above ~