careers page, mobile

[melissasamworth]

The goal is that mobile is perfect on this page, so that when we duplicate this page to make the others, we shouldn't have to think about mobile.

• most of mobile happens by default

  • anywhere that padding is assigned with a variable, it will be automatically converted using the spacing units below
  • 
    • That should be everywhere, if we are following the systems. Make sure there is nowhere that a variable isn't used, and that padding units look weird
  • all the type will be automatically converted too based on CSS already defined for these tags and classes

• what we have to code

  • assume that anywhere on desktop that 2 or 3 elements are shown horizontally, that they shift to take up 100% of the width on mobile
  • if you’ve assigned one of the .col-* classes (which we should do), I think many of them will convert automatically to the full viewport width on mobile (I’ll need to look into this more to make sure they do)
  • if something has a width that is not defined by these classes, probably go back and define it using these classes
  • assume also in these cases that the elements stack horizontally (there is only one case where I want to use a slider, I’ll point that out)
  • if the elements were 40px apart left and right on mobile, then they should be 24px apart horizontally when they switch over to being stacked on mobile

Nemo should be taking care of mobile version for the articles section, the person who owns this task just needs to own making sure this is complete before checking off that this task is done

Testimonials for mobile are one exception, in that for mobile only they should be the height of what contains them, not the same height as each other

The Figma shows enough to show what happens for the various elements, but doesn't show mobile designs for every single page.