CSS to Increase video size on mobile only.

[Exodusllc]

Hello, can you assist me. Based upon your work here, my question is along the lines of this topic. I have added a video to my website by adding a "Custom Liquid" section. The video consist of only text and it is shown on both Desktop and Mobile. However, on mobile, the video is extremely small. Can the existing code be modified to make the video larger on Mobile? Here is the code being used (Note that I replace my website with "web address goes here".

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="web address goes here">
<source src="web address goes here">
</video>

Similar threads to:
padding size in mobile view for policy page

[Made4uo-Ribe · Accepted solution]

Hi @Exodusllc 

Please, share your store URL. Thanks!

[Exodusllc]

Hello, do you have a recommendation I can try simply by modifying the shown CSS😁?

[Exodusllc]

Thank you for your support.  You solution works perfectly!!!!

I just needed to copy, paste and change the links.  Thanks again!

<style>
/* General Styles */
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* Hide Mobile Video on Desktop */
.desktop-video {
display: none;
}

/* Hide Desktop Video on Mobile */
.mobile-video {
display: none;
}

/* Show Desktop Video for Larger Screens */
@media (min-width: 768px) {
.desktop-video {
display: block;
}
}

/* Show Mobile Video for Smaller Screens */
@media (max-width: 767px) {
.mobile-video {
display: block;
}
}
</style>

<!-- Desktop Video -->
<video class="desktop-video" muted autoplay playsinline loop>
<source src="desktop-video.mp4" type="video/mp4">
</video>

<!-- Mobile Video -->
<video class="mobile-video" muted autoplay playsinline loop>
<source src="mobile-video.mp4" type="video/mp4">
</video>

[Made4uo-Ribe]

Oh, you posted ahead of me. Welcome! Would you mind hitting 'like' as well? Thanks!

[Exodusllc]

Hello. I have a similar question.  How would I do the same thing but for an image, instead of a video?

[Made4uo-Ribe]

Hi @Exodusllc 

Which image are you referring to?

[Exodusllc]

An image already uploaded to Shopify. What I am trying to do is just show a sentence on made website saying "Available online at Walmart" next to their symbol but can't figure out as easy way to do this.  I tried to use the Rich Text field but can't add the Walmart logo in it.

[Exodusllc]

Is this just a matter of replacing a few lines referring to video with code referring to an image?  If you, can we update the code in the previous chat for an image?

[DaisyVo]

Hi @Exodusllc 

Please share your store URL so I can take a closer look

Best,

Daisy

[Exodusllc]

Is there another way to share my store link?  I prefer not to share on a forum.