Dual videos to stack on mobile - html

Question

I am working on a shopify page and customized the video section template to post dual videos. So I was able to create the two videos side by side but when I display them on my phone it displays the video side by side instead of being stacked. below is a snipet of the code. If yall need the all the text I can send it. I made it short for space. I would like to thank you for y'alls help in advance.
I am assuming that the changes will need to be done in css, but I not sure how to format the #media tag.
<!-- Beginning first video -->
<div class="mvideo-layout">
<div class="video-container">
<div id="multiple-left" class="video-item--multiple" data-action="play-video">
<div class="video-wrapper">
<div class="video-wrapper__image-wrapper">
{%- if section.settings.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes:
'300,400,500,600,700,800,900,1000,1200', image:
section.settings.image -%}{%- endcapture -%}
{%- assign image_url = section.settings.image | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
This begins the next video on the side
<!-- Beginning second video -->
<div id="multiple-right" class="video-item" data-action="play-video">
<div class="video-wrapper">
<div class="video-wrapper__image-wrapper">
{%- if section.settings.image2 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes:
'300,400,500,600,700,800,900,1000,1200', image:
section.settings.image2 -%}{%- endcapture -%}
{%- assign image_url = section.settings.image2 | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
Here is the CSS code
.mvideo-layout{
max-width: auto;
}
.video-container{
position: relative;
padding-bottom: auto;
}
#multiple-left{
float: left;
padding: 5px;
width: 47.5%;
box-sizing: border-box;
}
#multiple-right{
float: left;
padding: 10px;
width: 47.5%;
box-sizing: border-box;

Answer 1

Everyone after a little more research I found my answer. I add the following to my CSS file.
#media (max-width:767px) {
.video-container {
width: 100%;
height: auto;
}
#multiple-left {
width: 100%;
height: auto;
float: none;
}
#multiple-right {
width: 100%;
height: auto;
float: none;
}
}