Next

Specify what layout differences exist in the 768px and 1168px range.

Scope

• @michaelfbradley: define what should change between desktop / tablet viewports and/or tablet / mobile.
• @eiennohi: make the required changes to homepage.
• @edgebal: make the required changes to product pages.

added scoped label

assigned to @markeharding, @michaelfbradley, @edgebal, and @eiennohi

added scoped labels

changed weight to 3

changed the description 3 times within 4 minutes

@edgebal - You're exactly right. We missed tablet / medium layouts altogether. I've done up an example tablet layout for the Pro page, which you can find via the following link.

https://invis.io/KWU1X9IEB2U#/392774936_Product_Page_-PRO--Desktop-__Medium

The above is designed at a width of 900px. Ideally the margin illustrated in the design should be maintained.

I suggest for now we maintain three sizes only. We won't worry about orientation for now. The breakpoints detailed below seem like sensible defaults to me, but feel free to tweak as you see necessary.

• Small (Mobile) < 500px
• Medium (Tablet / Small Desktop) >= 500px & < 1000px
• Large (Desktop) >= 1000px

The above design will play very nicely with all other product pages. I'll try to take a look at the Homepage tablet layout today, given that there some nuances with the homepage design.

cc @edgebal @eiennohi @markeharding @jotto141

marked the task : define what should change between desktop / tablet viewports and/or tablet / mobile. as completed