Mobile slider/alternative image fallbacks

Mobile shows only on phones, or basically screens smaller then 767px.

What do you mean by a fallback image?

Kadence Themes

Hey Kadence,
by fallback I mean an alternative if the browser doesn’t support svg. I have a detailed logo that I would like to use and png or jpg just doesn’t worked when resized, so I would like to use a vector but have a fallback in case the browser won’t load it.

There isn’t a built in option for this. You would need to use a child theme and edit the header template. That or repurpose the retina logo image to change based on browser support.

Kadence Themes

I know there isn’t a built in option, I thought maybe there is a way with css, like this

.logo {
    background: url('img/logo.png');
    background-image: url('img/logo.svg'), none;
}

Would this work somehow?

No, not like that. The logo is added as an image not as a background so if you added something like that you would need to add a blank transparent image (same exact size as your logo) into the theme options for the logo then you could use css like that to se the background for the blank logo image. So would be more like this:

.logo img {
    background: url('img/logo.png');
    background-image: url('img/logo.svg'), none;
background-size: cover;
}

Kadence Themes

Thank you very much!