3 Videos Side by Side

maaferreirac · ‎05-13-2024

Hi there,

Is there a way to make these 3 videos stay side by side on this page - and not as massive as they are right now?

https://www.manukadoctor.co.nz/pages/olympics

New to codding and struggling a bit with that.

Thank you!

Raj-webdesigner · ‎05-15-2024

Add This css in your edit code > theme.liquid file<body>tag in

.template-page.suffix-olympics div[style="padding: 200px; max-width: 1920px; margin: 0 auto; display: block; width: 100%;"] {
    padding: 0 50px !important;
    max-width: 1133px !important;
}
.template-page.suffix-olympics .rte .container {
    max-width: 1133px;
    padding-bottom: 10px;   
}
.template-page.suffix-olympics .column-center,.template-page.suffix-olympics .column-right,.template-page.suffix-olympics .column-left {
    max-width: 100%;
    width: 100%;
}
.template-page.suffix-olympics .rte .container video {
    vertical-align: bottom;
}
@media screen and (max-width: 700px){
    .template-page.suffix-olympics .rte .container{
        padding: 0 50px !important;
    }
    .template-page.suffix-olympics .rte .container {
        padding-bottom: 4px !important;
    }
}

Are you looking for Shopify Developer then your search is over I will help you

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

View solution in original post

Raj-webdesigner · ‎05-14-2024

Add This css in your edit code > theme.liquid file <body> tag in

.rte video {
    max-width: 100%;
    max-height: 100%;
}

Are you looking for Shopify Developer then your search is over I will help you

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

maaferreirac · ‎05-14-2024

Hi there,

That didn't work. What I am hoping is the videos to look like this on the page:

Do you have any suggestions?

Thank you,

Marina

Raj-webdesigner · ‎05-14-2024

Add This css in your edit code > theme.liquid file<body>tag in

.column-center, .column-right, .column-left {
    max-width: 33.33%;
    width: 100%;
}
.rte .container {
    display: flex;
    gap: 4px;
}
.rte video {
    max-width: 100%;
}
@media screen and (max-width:425px){
   .rte .container {
    gap: 2px;
   }
}

Are you looking for Shopify Developer then your search is over I will help you

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

maaferreirac · ‎05-14-2024

Thank you! That worked 🙂

Now, for it to be perfect I would like the whole content to be in the center of the page.

I changed the video width to be smaller but everything moved to the left side, is there a way to center it?

https://www.manukadoctor.co.nz/pages/olympics

Thank you!

Raj-webdesigner · ‎05-15-2024

Add This css in your edit code > theme.liquid file<body>tag in

.template-page.suffix-olympics div[style="padding: 200px; max-width: 1920px; margin: 0 auto; display: block; width: 100%;"] {
    padding: 0 50px !important;
    max-width: 1133px !important;
}
.template-page.suffix-olympics .rte .container {
    max-width: 1133px;
    padding-bottom: 10px;   
}
.template-page.suffix-olympics .column-center,.template-page.suffix-olympics .column-right,.template-page.suffix-olympics .column-left {
    max-width: 100%;
    width: 100%;
}
.template-page.suffix-olympics .rte .container video {
    vertical-align: bottom;
}
@media screen and (max-width: 700px){
    .template-page.suffix-olympics .rte .container{
        padding: 0 50px !important;
    }
    .template-page.suffix-olympics .rte .container {
        padding-bottom: 4px !important;
    }
}

Are you looking for Shopify Developer then your search is over I will help you

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

Vinsinfo · ‎05-14-2024

@maaferreirac Please follow below steps and let me know whether it is helpful for you.

1. From admin, go to "Online stores" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search for "theme.liquid" file and paste below code above to the closing head tag "</head>" like in the attached screenshot.

<style>
    #MainContent #page-wrapper .rte .container video {
        width: 100%;
    }
    #MainContent #page-wrapper .rte .container>div:has(video) {
        width: 33.33%;
        display: inline-block;
        margin: 0px 0px 0px -4px;
        padding: 0px 2px;
    }
    #MainContent #page-wrapper .rte .container>div:first-child:has(video) {
        margin: 0px 0px 0px 0px;
    }
</style>

Now, the result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

3 Videos Side by Side