My desktop video looks great, my mobile version is squished

[b3thanyj3an]

So I was posted some new things to my website and was changing the video at the top. The desktop on is fine. However, the mobile one is squished and terrible to look at. I used the Video Banner option. Not sure if I need to use something different or what I should so. If someone has a minute to help me it would be greatly appreciated.

website: www.thedustybroomcloset.com

[Mateo-Penida]

Hey @b3thanyj3an

The squished video on mobile is a common issue with the Video Banner section. It usually happens because the video was recorded or exported in a wide landscape ratio (like 16:9) and on mobile that gets compressed into a narrow space.

A couple of fixes:

1. In the theme editor, go to your Video Banner section and look for a setting called “Video height” or “Adapt section height to video.” Some themes let you set different heights for desktop vs mobile. Try switching it to “Adapt to video” if it’s set to a fixed height.

2. The better fix: use a different video for mobile. Record or crop a version of your video in a vertical or square format (9:16 or 1:1) and set it as the mobile video. Most themes with a Video Banner let you upload separate videos for desktop and mobile. If yours doesn’t, you can use the “Image with text” or “Custom liquid” section as an alternative that gives you more control.

3. If none of that works, try replacing the Video Banner with a “Slideshow” or “Image banner” section using a still frame from your video. Sometimes a strong static image works better on mobile than a compressed video.

One more thing I noticed while checking your store: you have several spam reviews from a “carolina peter”. I’d delete those ASAP since they hurt your credibility. You can manage them in your Judge.me dashboard.

Hope that helps, love the brand btw!

[b3thanyj3an]

I’ll give Them a shot! And thank you I didn’t even notice I had the reviews they don’t show up on the apps side. I wonder why? I’ll take a look at it and get rid of them though. Thank you for getting back to me as fast as you did! I’m very grateful

[tim_tairli]

Consider this solution – How to upload video on website banner for mobile and dekstop - #5 by tim_1

[tim_tairli]

@Monsterdev

@media screen and (min-width: 750px) {
  .focused-section, $section {
    display: none !important;
  }
}

What’s $section ?

---

[Monsterdev]

Here $section is a special placeholder token used within the theme customizer. It acts as a shortcut that automatically targets the unique ID of the specific section you are currently editing.

When Shopify processes your code, it replaces $section with the actual wrapper ID generated for that block. Using this will only apply to that single video section.

[tim_tairli]

@Monsterdev

$section is a special placeholder token used within the theme customizer. It acts as a shortcut that automatically targets the unique ID of the specific section you are currently editing.

Does not look like this:

[b3thanyj3an]

Ok I made both videos just how you told me to. Uploads them to the files section. This is were I got stuck. You said go to online store > theme > customize. Ever since my Shopify updated I don’t have that anymore. So I have online store and then it says edit theme. *see picture* is this where you want me to click? Then when I’m into customize my website I go to the template side where it says video banner if I click it, I don’t have the option for a mobile video. I only have the option to put in the desktop. So is this the area where you want me to customize the CSS?

I’m sorry for so many questions. I appreciate any help. You’re willing to give me though. Don’t mind the federal quality. I’m working on the desktop and I took a picture from my phone. lol

[b3thanyj3an]

OK, I’m working on trying to fix this. I made two separate videos so that I can use one for desktop and one for mobile. I don’t have the option when I’m editing the video banner for a mobile one. One’s only giving me the option for the desktop.

don’t mind the photo quality I’m working on the desktop and I just took them using my phone lol. I also took care of those reviews that you mentioned. Thank you! Never would have seen them if you didn’t say anything.

[tim_tairli]

Yes, what’s now “Edit theme” was called “Customize” earlier.

Just follow my solution I’ve linked above, one section for desktop video, another – for mobile one, each section has “Custom CSS” setting at the bottom – paste codes there.

Resize your browser window on desktop to make site width less than 750 pixels theme will switch to mobile view.

“Edit theme” also has a mobile icon at the top to do similar.

Your theme will switch to mobile view, hide desktop video section and show the mobile one – you will be able to configure that section too as you see fit.

---

Monsterdev’s solution is similar to mine, but the code is broken.

---

Also -- your Dawn theme is 4.0.0, current version of Dawn is 15.4.1 -- it's difficult to remember excatlym what theme settings were available in yours.