html – Dual videos to stack on mobile


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;



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here