Mobile View Padding Fix

[jsnorek]

Issue #569

On mobile, the website text goes all the way to the right and looks almost cut off. The margin on the left is larger than the right.

Visual of Issue

The Fix

The embedded YouTube video on the Apply page was causing most of the issue as it was hardcoded to 560px so any screen size below that was causing overflow. I made the video/container responsive which fixed this viewing problem.

I also added some additional css to help with content shifted to the left, like buttons and text.
I've checked margin spacing on each page and it no longer looks like any pages have overflow. Some of the text was shifted to the left as a styling choice for desktop view, but it looked a little odd on mobile as some things were way off. I started by centering only some items like singular buttons, but then the other shifted left items looked odd, so I centered everything.

Please let me know if anything should be altered.

[monikkaelyse]

Thanks for tackling this! Here's a few issues I'm noticing

Long paragraphs of text should not be centered, just certain things. Here's a good guideline:
Key points about mobile text alignment:
Readability:
Left-aligned text is easier to read on mobile screens because users can quickly scan lines by starting at the same point on each line.

Eye movement:
Centered text forces the eyes to jump back and forth across the line to find the beginning of each new line, which can be tiring.

Appropriate uses for centering:

• Short titles or headings
• Single-line quotes
• Dates or key points where emphasis is needed

I'm seeing an issue of overflow on the Techtonica Consulting page and also the Sponsor page (maybe font is too big? I would use media queries to adjust)

[jsnorek]

@monikkaelyse okay so I pushed a new commit that basically takes off any text centering I had and that reduces the text size of those headers at that breakpoint so it doesn't look cut off anymore. It all looks good above 305px, but it looks like 320px is our smallest media query so I assume that's the smallest screen to account for?

Let me know if you see anything else that needs adjusting.

---

Also leaving a note for the styling of some of our buttons - some are centered, some are to the left. Some are small while some take up most of the page width. Not sure how we'd like to keep the styling. For example, the "discuss consulting" button on the consulting page is to the left, while the "contact us" button on the team page is very wide and centered.

Another note - the consulting.html page has a prettier error of < li > being wrapped in a < p > instead of < div > so it won't let you commit changes to that page until you fix it, but that causes a styling issue. So this will likely need to be addressed at some point.

[ChasVanDav]

The text readability looks really great after that last change! Great job with the media queries.

[monikkaelyse]

Looks good to me !
I would suggest adding a media query to change the justify text to left align the text instead if possible (since this would no longer be justify aligned, we may need to rename that class). If out of scope feel free to create a new issue please. Other than that looks great!