Make video larger on Dawn theme

[a-maise]

Hello,

I have added a video using custom liquid. I am using Dawn theme.

video { width: 100%; height: 70%; display: block; margin: 0 auto; }

However, it appears very small on the mobile. How do I make it larger?

[BSSCommerce-HDL]

Hi @a-maise

Can you share your store url ( with password if needed) so we can firgure out problems

[a-maise]

Yes, how to solve it?

[a-maise]

It’s a-maise.com

[BSSCommerce-B2B]

Hi @a-maise ,

I have checked your website, and I see that to make the video appear larger on mobile devices, you can adjust the CSS to be more responsive by setting the height of the video.

You can follow my instructions:

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .color-scheme-1.gradient video {
    object-fit: fill;
    height: 350px;
  }
}

In this step, you can change height of video and set attribute “object-fit” to fill.

However, this will cause the image to stretch and might not look as neat as when your video originally fit the mobile screen with a height of around 250px and object-fit: contain.

Please consider this.

Step 3: Save and reload home page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!