My site isn’t looking great on a mobile or tablet. Issues are mainly with header & the slider, 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 (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.