Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello, I’m trying to adjust the size of my homepage video on my website that automatically plays. While it looks fine on desktop, it appears too small on mobile. Is there a way to change the size specifically for the mobile version? Additionally, I’d like to apply similar adjustments to other elements on the site like the love hearts half way down the home page with text under it the hearts are way too big on desktop but look fine on mobile. I am having to make things really big just so it can be of a decent size on mobile.
Hello @Hello29 Copy and paste this code to resize your video for mobile view then let me know if it works for you
<style>
@media (min-width: 620px) and (max-width: 767px) {
#shopify-section-template--16340303020204__background_video_Kn3CHe {
height: 40%;
}
video.video-js {
position: relative !important;
height: 320px !important;
}
#shopify-section-template--16340303020204__background_video_LHNBRA {
max-height: 325px !important;
}
}
@media (max-width: 619px) {
#shopify-section-template--16340303020204__background_video_Kn3CHe {
height: 30%;
}
video.video-js {
position: relative !important;
height: 200px !important;
}
#shopify-section-template--16340303020204__background_video_LHNBRA {
max-height: 205px !important;
}
}
</style>