[PNI] Product page - header updates: Mozilla Researched

[Pomax]

• Add a Mozilla researched entry to the Product page
  • add copy + template section for hours spent researching this product
  • link to methodology "about" page
  • add a "time researched"number field to theProductPage` backend model
  • add info circle. SVG icon here: https://drive.google.com/open?id=1TbEuGYvryqkcfticy1IdG0eRz7Nfs1mg&authuser=sabrina%40mozillafoundation.org&usp=drive_fs

Relevant part of the updated product page comp:

Comps on figma: https://www.figma.com/proto/GwdoUiY4fzVyeLfXsAJGPq/*Privacy-Not-Included-Website?page-id=548%3A72128&node-id=611%3A77813&viewport=283%2C48%2C0.08&scaling=min-zoom&starting-point-node-id=611%3A77813

[danielfmiranda]

Hi @kristinashu! I have a quick question regarding this ticket and the medium-small breakpoints:

Currently, the new fields look good on both desktop and mobile breakpoints (The people voted section is just a placeholder for now):
Desktop:

Mobile:

However, on the medium and small breakpoints, the text seems to get very squished or compact:
Medium:

Small:

I was wondering if there was a way the design team would like us to resolve this. At the moment, one solution I can think of would be to have the columns go from 4 on desktop, to 2 and 2 on medium-small, and then finally to 1 on 1 on 1 on 1 on mobile.

However I wanted to run this by the design team to see if there were any other preferred solutions for this, thanks!

[kristinashu]

Thanks for checking @danielfmiranda! I think your suggestion of "columns go from 4 on desktop, to 2 and 2 on medium-small, and then finally to 1 on 1 on 1 on 1 on mobile" sounds good but I would like @sabrinang's input.

[sabrinang]

+1 @danielfmiranda your suggestion sounds good to me and I can see it looking like this: