Clinic Schedules Page Mobile Layout

[kanikaram-sejal]

No description provided.

[naomitzhao]

While this technically works for the mixins we have defined, note that the layout has unexpected behavior in between the breakpoints. For example, between tablet and phone, the edges of the cards start going off the screen.

Instead of using mixins to statically define widths, can you create flexible layouts? Here's how you'd implement that at a high level:

• Notice for the mobile design, the entire page has the same width padding (16px on each side). You can give the .page class a mixin for mobile that applies 16px width padding for the entire page.
• For every other component, have it stretch to take up the entire width. Then when the screen size changes, the width of the component will change dynamically and take up the entire width it's allowed within the padding. This will happen automatically if you use a column flexbox and align-items: stretch; for the page.

Let me know if you have any questions or need help getting this done!

[C3viche]

fixed and approved

fixed