Vary image/video between mobile and desktop - Sense Theme

Vary image/video between mobile and desktop - Sense Theme

bikerboi
Excursionist
24 1 9

I am trying to write a custom liquid that displays a certain image/video on mobile, and a secondary image/video on the desktop site (i.e. square for mobile, and landscape for desktop).  The code I currently have successfully displays the desktop specific media on desktop, but show both the mobile and desktop medias when displayed on mobile (see screenshots below).  I have tried a variety of different tweaks to my code, but haven't been able to figure out how get only the mobile media to display on the mobile site.  The code I am using in the custom liquid blocks for both the video and static image display is included below. Any help would be greatly appreciated. Thanks!

 

My website is - https://kovaasport.com/

 

Media displays properly for desktop siteMedia displays properly for desktop siteBoth desktop and mobile media show on mobile siteBoth desktop and mobile media show on mobile site

 

Video Code 

 

<a href="https://kovaasport.com/collections/bike-jerseys">

<style>
video {
	width: 100%;
	display: block;
	margin: 0 auto;
}
.desktop-video {
	display: none;
}
.mobile-video {
	display: block;
}
/* screen sizes above 992 pixels */
@media screen and (min-width: 992px) {
	.desktop-video {
		display: block;
	}
	.mobile-video {
		display: none;
	}
}
</style>

<video muted autoplay playsinline loop class="mobile-video">
    source src="file location mobile"
                  type="video/mp4">
    <source src="file location mobile"
                  type="video/mp4">
</video>

<video muted autoplay playsinline loop class=“desktop-video">
    source src="file location desktop"
                  type="video/mp4">
    <source src="file location desktop"
                  type="video/mp4">
</video>

<a>

 

 

 

 

Image Code

 

 

 

<style>
img {
    max-width: 100%;
    max-height: 100%;
}

.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="file location">
</div>
<div class="desktop-image">
<img src="file location">
</div>
</div>

 

Reply 1 (1)

wayback
Visitor
1 0 0

Hi, did you find the solution?

If so could you pls share it

Thank you!