Design discussion

[MohammedYehia]

this will be an issue for design discussion and tips

[martinbagshaw]

@MohammedYehia this is not resolved by setting a container at 70% on one page. Requires app-wide due diligence.

The text-align: center doesn't do anything for this container either - paragraph and heading are left aligned still, as they are in the design.

Perhaps we need to agree on a max-width for the page container that is smaller than 1440px, and perhaps consider tablet sizes too?

Open to discussing this, but I will do a pull requests for this sort of thing to address stuff as we go along.

[martinbagshaw]

^ might want to set display: flex over mobile(ish sizes) - say 600px to be safe

[martinbagshaw]

I'd also encourage everyone to keep referring back to the design as they work.

Tips:

• Generally easier to start mobile first, then do stuff for desktop, as mobile layouts are more basic. display: flex on a parent container sets child elements side by side by default. So may want to set display: flex over 768px if this is our main breakpoint
• in Chrome developer tools, you can select common device sizes by clicking the blue icon (top right in the below screenshot). Styling in the dev tools also gives instant feedback.

[martinbagshaw]

^ fixed the above now. Lets keep this issue open to flag up any layout issues though.

[MohammedYehia]

@mr-bagglesworth really appreciate the work thanks I opened this issue to remind me to adjust my design for the mobile 😅

I am changing the name to be a reference for the rest of the team as your suggestion thanks again

[martinbagshaw]

@Mohammed good call. For debugging dropdowns, I have a tip in #67 that is handy.

In #67, I have also set a max width for content containers to 1024px. In the header, this is 1440px.