Video height on mobile

Store Design
,

Topic summary

  • Main issue: The poster wants to increase the height of a homepage video section on mobile so it displays and plays properly.
  • Request: Asks for specific, working CSS code to adjust the video section’s height on mobile devices.
  • Context: Shares a live site URL (mansome.eu) and an attached screenshot illustrating the current, too-short mobile video layout.
  • Technical focus: CSS changes for responsive design on mobile; no particular theme or platform details provided beyond the website link.
  • Outcomes/decisions: None yet; no solutions or code snippets have been shared.
  • Status: Open and unresolved; awaiting guidance or a CSS example.
  • Note: The screenshot and site link are central to understanding the layout issue.
Summarized with AI on December 11. AI used: gpt-5.
1

Hi im trying to increase the height of this video section for mobile version so it still plays nicely but i cant get it to work. Any support with proper CSS code please? MANSOME® - Premium Grooming For Men 2024 | MANSOME Europe

image
image632×598 63 KB

1 Like
2

Not sure what settings are available in your theme, but consider this option:

3

Hi, @JustinasR
I suggest replacing the mobile version of the video instead of adjusting the video height with CSS alone, because doing so will cause the video to be cropped.

4

Hey! @JustinasR

Yep, you can increase the height of the video section on mobile — most themes lock the mobile height with aspect-ratio or fixed padding, so normal CSS doesn’t work unless you override those rules.

Try adding this CSS:

/* Increase video height on mobile */
@media screen and (max-width: 749px) {
  .section-video,
  .video-section,
  .media--video,
  .media-wrapper video {
    height: 70vh !important;  /* Adjust height as you like */
    max-height: 70vh !important;
    object-fit: cover !important;
  }
}

Why this works:

  • 70vh makes the video taller and responsive.

  • object-fit: cover keeps the video looking clean without distortion.

  • The selectors cover the most common video wrapper classes across Online Store 2.0 themes.

You can share your store’s theme so we can send you a exact code for this.

5

This didnt work at all.

6

The video itself is normal height, only the section makes it lower for mobile version.

7

Can you share which theme are you using?