Mobile background image not showing, and slider dots seem transparent

Hi Stephen-

Thanks for reaching out, and thanks for using the Crio WordPress theme.

I’ll try to tackle each of your questions one-by-one.

1. On my mobile the background images are not appearing on my home page…

When I check out your page, they aren’t even working on the desktop site for me. I believe this is because the image URL’s are still using your DreamHost staging URL, ...dream.website, and they’re not loading because the SSL certificate is only good for your real domain. If I remove that part of the URL’s and look at the page, I can see the images working correctly.

I think the only reason you can see them on your desktop is because you already had the images in your browser cache from when you were working on the staging URL.

2 and 3. …on my ‘Home2’ page… The navigation dots are out of alignment in the mobile view… I have considered… using navigation arrows… [but] they are transparent.

It looks like some of the CSS is off on this particular Crio design. I’m going to let the developers know so we can get this fixed moving forward, but for right now you can add these two lines to your Customize > CSS/JS Editor, in your custom CSS Code:

ul.slick-dots {
    width: fit-content !important;
}
button.slick-arrow {
    color: var(--color-1-text-contrast);
}

This code should ensure the dots stay on a single line, and make your arrows always appear as a contrasting color to your color palette.

4. The headings on the slider don’t scale to mobile e.g some words go across 2 lines… is there a way to scale these headings for mobile only?

Automatically-scaling font sizes turn out to be pretty tricky, and we’re currently working on this feature for the overall Crio Theme. However, in this case I was able to find a good Custom CSS rule that will keep your headings reasonably scaled on mobile devices.

This rule uses a media query, so that it only runs on mobile devices. And then, it uses the special vw unit, which is based on the width of the window. It’s also assuming that you’re using H1 elements in your slider, like you are now:

@media only screen and (max-width: 768px) {
	div.slick-slide h1 {
		font-size: 6vw !important; 
	}
}