How do I reduce the size of a section for mobile, when it is perfect for desktop?

[RoyalDesign]

Hello, I am attempting to reduce the size of the section that contains this video I added. I have tried editing the CSS with multiple variations but I don't think I can fix this issue from there, I am pretty sure it has to be in the code.

Here is the code for the section:

<div class="section-homepage-video">
<video autoplay muted loop playsinline class="video-homepage">
<source src="https://cdn.shopify.com/videos/c/o/v/a121cf30310245f7997099b2aa6fb61b.mp4" type="video/mp4">
</video>
</div>

{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}

{% stylesheet %}
.section-homepage-video{
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Set the height of the section to the height of the viewport */
}

.video-homepage{
width: 75%;
height: auto; /* Remove the fixed height to maintain aspect ratio */
max-width: 100%; /* Make sure the video doesn't overflow the parent div */
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Here is the CSS code I am using currently:

@media (max-width: 767px) {
.video-homepage {
height: auto; /* Set the height to auto to fit the video */
padding: 0; /* Remove any padding */
max-width: 100%; /* Set the maximum width to the size of the viewport */
}
.video-homepage {
width: 100%; /* Set the width to 100% to fill the parent div */
height: auto; /* Set the height to auto to maintain aspect ratio */
max-width: 100%; /* Make sure the video doesn't overflow the parent div */
}
}
}

Any help on this would be greatly appreciated, thank you.

[PageFly-Victor]

Hi @RoyalDesign ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

[RoyalDesign]

bedtimestoriesbook.com

[PageFly-Victor · Accepted solution]

Hi @RoyalDesign 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 767px){

section-homepage-video {

    height: 100% !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[RoyalDesign]

That worked for the video, thanks

[BSS-Commerce]

Hi @RoyalDesign

We see your CSS code has not been used on the theme.

Please add the following code at the end of the styles.css file:

@media (max-width: 767px) {
  .section-homepage-video {
    height: auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
}

Here is the final result:

We hope this can help you. 

[RoyalDesign]

this is what happens when I try to do what you said.

[RoyalDesign]

Am I supposed to find the file in the edit code section? Because there isn't one.