Hi my video is in landscape size right now. I would like it vertical on my mobile and tablet version. Please help
PW: CollectionThree
Topic summary
A user wants to display their banner video in portrait orientation on mobile and tablet devices while keeping it landscape on desktop.
Recommended Solution:
- Upload separate videos for desktop and mobile versions (best practice)
- If the platform doesn’t support multiple uploads, custom CSS can be implemented
CSS Workaround Provided:
- Navigate to theme settings → Edit Code
- Search for “base.css” in the search bar
- Add the following media query targeting screens up to 991.98px width:
@media (max-width: 991.98px) {
.video-container {
height: 100vh !important;
}
}
This CSS forces the video container to full viewport height on smaller screens, creating a portrait-style display. The solution assumes the user is working with Shopify’s theme customization system.
Hi,
Actually, the best option is to upload different videos for desktop and mobile areas. Of course, if the software you’re using doesn’t support it, we may need to do a custom setup!
The following code may be useful for now.
Terence.
Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.
@media (max-width: 991.98px){
.video-container {
height: 100vh!important;
}
}
