Fix mobile view and add mobile media queries.

[gbowne1]

My desktop device is 1920x1080 but the CSS viewport is 1884px x 905px.

I always expect my topbar/topnav on desktop to be 1884x60 when inspecting it in console.

I expect CSS breakpointsin any media queries to be:

1920x1080 (Desktops)
1366x768 (Laptops)
375x667 (Some mobile and tablet)
360x640 (Other mobile and tablet)

I expect the footer to be no more than 500px high, but my footer only needs to contain my social icons and copyright and quick contact links so can be very short in height.

[gbowne1]

I think the media queries would be:

@media screen and (max-width: 1366px) and (max-height: 768px) {
/* Your styles for 1366px x 768px laptop */
}

@media screen and (max-width: 375px) and (max-height: 667px) {
/* Your styles for 375px x 667px Apple iPhone */
}

@media screen and (max-width: 360px) and (max-height: 640px) {
/* Your styles for 360px x 640px Android phone */
}