Adjust CSS (& HTML if needed) to make content width more flexible

[joe-dev-public]

Lower priority than meeting all user stories, I think! :)

Two goals:

• Give some left/right margin to content when viewport is very narrow (particularly the big quote)
• Let the "our approach" box be wider than the other content areas

There are a few approaches, not sure at this moment what the best is.

e.g. give section left/right padding.

Possibly involves adding an additional container element to each <section> though?

[HusJAW]

set a max-width of 100vw for the main is a quick fix to keep most of the content from stretching out of the screen on mobile view.

#about-us-decoration
change/add the following
reduce gap to around 2rem 5 is too much
add 1rem padding because text from the quote is overflowing and going under the scrollbar bar
text for the quote in this section is way to big maybe leave it as default size

Design is strategic image needs a media query for mobile to control its width in mobile view. because the fixed width is effect the viewport maybe set a max-width of 19rem for mobile

contact form .contact-container remove height: 75%. as the height is controlled by content and padding.

[joe-dev-public]

set a max-width of 100vw for the main is a quick fix to keep most of the content from stretching out of the screen on mobile view.

I've done this in #55, that seems to fix it, thanks! (Also added a small amount of padding, which may relate to below.)

#about-us-decoration change/add the following reduce gap to around 2rem 5 is too much add 1rem padding because text from the quote is overflowing and going under the scrollbar bar text for the quote in this section is way to big maybe leave it as default size

If I understand correctly, the quote text was going under the scrollbar on mobile? Hopefully padding added above resolves this.

Will adjust gap and font size in a separate branch (I feel that's more about overall tweaking to make sure the appearance feels balanced and reflects the original design?).

Design is strategic image needs a media query for mobile to control its width in mobile view. because the fixed width is effect the viewport maybe set a max-width of 19rem for mobile

Also addressing in #55.

contact form .contact-container remove height: 75%. as the height is controlled by content and padding.

Was already fixed by @kmj673 in #52 :)