Site not looking great on mobile/tablet, need adjusting - css

Question

My site isn’t looking great on a mobile or tablet. Issues are mainly with header & the slider, www.bluehaveninv.com
Header is too wide (two rows) on mobile - I’d like it to be only one
row (that should include the hamburger menu too)
The slider loads v slowly - only the small text is visible first,
then part of rotating text, then some of fixed text, then the rest
(but some part remains hidden by the header). The word doesn’t fit
in a line - have tried to change font size for mobile, but it isn’t
working.
The small text on the slider is very small on the iPad. It’s fine on
the mobile and desktop.
Let’s work together section doesn’t have space between them on a
mobile. Is there a way to add some space between two blocks - flex
container - only for mobile?
On the iPad, since I am using 3 blocks in what we offer, 3 in
investment philosophy, the third part is aligned left below the
first two which gives a feeling of something left out. On the
desktop, all 3 are displayed in a line, which looks great. Any way
to centre align the third block for tablets? It’s a flex container.
I’ve tried using the code below to fix the header & font in slider, but nothing happens. I’ve flushed my cloudflare & site cache as well as browser cache. I’ve tested this on an ipad 6 (safari), iphone 6 & 12 (safari, firefox, duckduckgo)
#media (max-width: 767px) {
.hero__content h2 {
font-size: 20px !important;
}
.site-branding { max-width: 80% !important; }
.site-header { max-width: 80% !important; }
}
I added the word “screen and” in the code after #media & tried again, but to no avail.

Answer 1

Try It
#media all and (max-width: 767px) {
.hero__content h2 {
font-size: 20px !important;
}
.site-branding { max-width: 80% !important; }
.site-header { max-width: 80% !important; }
}