Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40452
    Stephen Cormack
    Guest

    Hi,

    I have a couple of issues with mobile display that I am hoping you can help with. I am using IOS device.

    1. On my mobile the background images are not appearing on my home page. When I am in customizer and viewing my home page (using the mobile display) it works fine. But on my actual mobile it just appears to be a white background, no images.

    2. I have a slider on my ‘Home2’ page (I am deciding between 2 home pages). The navigation dots are out of alignment in the mobile view. Instead of appearing in a horizontal line they are stacked vertically 2 by 2.

    3. I have considered getting rid of the navigation dots and using navigation arrows but when I enable them they don’t appear. They are there as when I hover over the section of the slider where they are positioned I can move the slider. It is as if they are transparent.

    4. The headings on the slider don’t scale to mobile e.g some words go across 2 lines. I know this might be because they are longer words e.g. ‘Memberships’, but is there a way to scale these headings for mobile only?

    Thank you.

    #40490
    Jesse Owens
    Keymaster

    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; 
    	}
    }
    
    #40532
    Stephen Cormack
    Guest

    Thanks Jesse, I really appreciate it. You guys are doing a great job!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Mobile background image not showing, and slider dots seem transparent’ is closed to new replies.