(cache)CR Product Pages (!676) · Merge Requests · Minds / Minds Frontend

added scoped label

@eiennohi please follow up with @michaelfbradley so knows how to test to give final approval so this can be merged in.

approved this merge request

@michaelfbradley Please confirm that these product pages are good to go. @markeharding and @xander-miller need your approval as well.

assigned to @xander-miller

assigned to @markeharding

added scoped label

removed label

Will do @brianhatchet @markeharding - Will review today.

General Product Page Feedback for large desktop screens

1 - Radio Buttons not displaying correctly or functioning
2 - text colour incorrect
3 - Missing purchase CTA and total per month
4 - header/nav should match designs
5 - Missing logos
6 - Footer should span the full width of the window
7 - Size of this polygon doesn’t full match designs

cc @eiennohi @markeharding

Responsive Issues

Not enough design consideration was given to the responsive nature of these pages. A medium sized view will need to be introduced. Moving forward, all pages will adapt across large, medium and small screens.

Breakpoints

The breakpoints for the responsive layout should be as follows.

Small screen <= 576px
Medium screen <= 922px
Large screen > 922px

Medium screen designs have been added to InVision. Multiple variations have been added to illustrate how the pages should look like across various sizes.

900px wide - https://invis.io/KWU1X9IEB2U#/397088238_Product_Page_-PRO--Medium_900-
700px wide - https://invis.io/KWU1X9IEB2U#/397088237_Product_Page_-PRO--Smaller_Medium_700-
600px wide - https://invis.io/KWU1X9IEB2U#/397088236_Product_Page_-PRO--Smaller_Medium_600-

Getting the responsive layout to function correctly for medium design will involve using margins/paddings/font-sizes/line-heights etc relative to the view width.

For example, See see the current state of the product pages at 600px wide.

cc @eiennohi @brianhatchet @markeharding