CODEWITHSUNDEEP
htmlimage
Sam
Sam

Reputation: 2093

HTML picture element not working in Edge or Firefox

This is the sort of thing I'm doing:

<picture style="display: block; margin:auto;">

    <source media="(min-width: 1080px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.webp">
    <source media="(min-width: 600px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-720.webp">
    <source media="(min-width: 360px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-360.webp">
    <!-- ios media -->
    <source media="(min-width: 1024px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.jpp">
    <source media="(min-width: 750px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-750.jpp">
    <source media="(min-width: 640px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-640.jpg">
    <img src="imagesIndex\hero-images\centaurs-horn-crop-750.jpg" alt="Firenze, Harry Potter's divination teacher poses for a photo for my walking tour on Edinburgh's Royal Mile"  class="center-box"/>

</picture>

Wrapped in <picture> tags. And it does not work, not even the fallbacks work. Is there a work around? Do I need to cut the alt text or something? What can I do?

It's meant to work on both. And the fallback is always meant to work (actually does in IE) so why doesn't it here?

It's a graphics rich site viewed on mobile, I need to use Webp whenever possible.

Site is here www.pottertour.co.uk/index.html

Upvotes: 1

Views: 1146

Answers (1)

IotaSpencer
IotaSpencer

Reputation: 77

I see a possible problem because of the file extensions on the later .jpg images, a couple of them are marked as jpp instead of jpg.

Upvotes: 1

Related Questions