Help with fixing the size on desktop for my custom liquid

Store Design

Topic summary

A user is experiencing sizing issues with custom Liquid code used to display background videos with clickable links on their Shopify store. The videos display correctly on mobile but occupy excessive space on desktop.

Current Setup:

  • Custom code creates video backgrounds with centered clickable links directing to product collections
  • Uses responsive padding that adjusts between mobile (75% scale) and desktop (100% scale) at 750px breakpoint

Problem:
Videos are disproportionately large on desktop while mobile version works as intended.

Request:
Seeking CSS or Liquid code modifications to reduce video size specifically for desktop view without affecting the mobile layout. The user has attempted multiple solutions without success and is looking for community guidance on implementing desktop-specific sizing constraints.

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

Website: Watchwondersco.com

This is a custom code I used to play a video on the background and have a link clickable in the middle to have people go to the products. I have tried a bunch of things but on the desktop version the videos cover way too much space and are huge. Any idea on how to fix that for the dekstop version but keep it the way it is for the mobile version? Thank you all for the help

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: calc({{ section.settings.padding_top }}px * 0.75);
    padding-bottom: calc({{ section.settings.padding_bottom }}px  * 0.75);
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    {{ section.settings.custom_liquid }}
  

{% schema %}
{
  "name": "t:sections.custom-liquid.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "liquid",
      "id": "custom_liquid",
      "label": "t:sections.custom-liquid.settings.custom_liquid.label",
      "info": "t:sections.custom-liquid.settings.custom_liquid.info"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    }
  ],
  "presets": [
    {
      "name": "t:sections.custom-liquid.presets.name"
    }
  ]
}
{% endschema %}

  

    
    [Our Complete Collection](https://watchwondersco.com/collections/all)
  

  
    
    [Our Cowhide Leather Collection](https://watchwondersco.com/collections/genuine-leather-watch-roll)