Shopify themes, liquid, logos, and UX
So I added a custom CSS code to have a video banner on my store homepage, it works fine on the desktop version but not on the mobile version, anyone knows what I can add to the code to have it show on the mobile version as well?
Solved! Go to the solution
This is an accepted solution.
Hey @Sh6300,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 767px) {
.videoBackground .fullscreen-video-wrap {
z-index: 1 !important;
}
.videoBackground .fullscreen-video-wrap video {
object-fit: contain !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @Sh6300,
Can you share the link to your store please? Thanks!
Thezenmonks.eu
pass: Hello#123
This is an accepted solution.
Hey @Sh6300,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 767px) {
.videoBackground .fullscreen-video-wrap {
z-index: 1 !important;
}
.videoBackground .fullscreen-video-wrap video {
object-fit: contain !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025