CSS Needed to reduce desktop max height and width

Store Design
, ,

Topic summary

A Shopify store owner uploaded a 1080x1920 portrait video that displays correctly on mobile but appears too large on desktop.

Solution Provided:

  • Add custom CSS code to limit the video’s maximum height and width on desktop screens (min-width: 769px)
  • Code can be inserted either in theme.liquid file (within <style> tags after <head>) or directly in base.css file
  • The CSS targets the specific video section class and applies max-height constraints (88vh, 90vh) with !important flags

Implementation Notes:

  • Initial confusion occurred because changes were tested on a theme copy rather than the live site
  • A caching issue initially made it appear the solution wasn’t working

Resolution:
The issue was successfully resolved after applying the CSS code to the live website and clearing the cache. The contributor also suggested using separate landscape videos for desktop and portrait videos for mobile as a best practice.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can someone please help me with some CSS code.

I have uploaded a 1080x1920 video onto my Shopify store, which works well on Mobile. But on desktop its way too big.

Page URL - https://uploadnutrition.com/pages/a-story-to-upload

Thank you

2

Hey @UploadNutrition ,

This is mainly because the video is a portrait. Better to use landscapes for desktop experience. I also get the issue with that when you have mobile that’s portrait. Mainly why I always make 2 video selectors, one mobile, one desktop on my stores.

Anyways, here’s the code!

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

If you want to paste it in the Custom CSS, just remove the tags.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707866835214.jpeg
ThePrimeWeb_0-1707866835214.jpeg1253Ă—933 87.9 KB

It’ll look like this though, again cause it’s a portrait.

ThePrimeWeb_1-1707866896100.png
ThePrimeWeb_1-1707866896100.png1595Ă—991 110 KB

1 Like
3

Hi @ThePrimeWeb ,

Thank you for your help so far.

I am bad with code. Do I need to update anything within the code for it to work ie address the asset directly? As it isn’t working as it is, within the code.

Screenshot 2024-02-14 085451.png
Screenshot 2024-02-14 085451.png1255Ă—521 55.6 KB

Thank you,

4

Hey @UploadNutrition ,

Have you saved the code? I don’t see the changes applied in the websites code.

Alternatively, you could also paste the code below in “base.css” file

@media only screen and (min-width: 769px) {
    .video-section.isolate.page-width.section-template--22190355579192__video_ieqqag-padding *:not(.deferred-media__poster-button) {
        position: relative !important;
        max-height: 88vh !important;
        width: fit-content;
        margin: auto;
    }
    
    .video-section.isolate.page-width.section-template--22190355579192__video_ieqqag-padding {
        max-height: 90vh !important;
    }    
}

.section-template--22190355579192__custom_liquid_JAEtdN-padding iframe {
    width: max-content !important;
}
5

Hi @ThePrimeWeb ,

I was working on a copy of the template - to ensure I don’t break the live website.

But I have now saved the code into the Live site for your review.

It does not appear to be scaling down the video at all.

Thanks,

sam

6

Ignore me - I do think this has worked.

For some reason my page had cached.

Thank you for your support, I really appreciate it!