Solved

3 Videos Side by Side

maaferreirac
Tourist
5 0 1

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!

 

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
251 55 60

This is an accepted solution.

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;
    }
}

 

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

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 6 (6)

Raj-webdesigner
Shopify Partner
251 55 60

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

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

 

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

:- Contribution

Contect On My Mail :-Mail@gmail.com


maaferreirac
Tourist
5 0 1

Hi there,

 

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

 

Page example.jpg

Do you have any suggestions?

Thank you,

Marina

Raj-webdesigner
Shopify Partner
251 55 60

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;
   }
}

 

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

:- Contribution

Contect On My Mail :-Mail@gmail.com


maaferreirac
Tourist
5 0 1

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
Shopify Partner
251 55 60

This is an accepted solution.

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;
    }
}

 

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

:- Contribution

Contect On My Mail :-Mail@gmail.com


Vinsinfo
Shopify Partner
256 93 84

@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>

 

Vinsinfo_3-1715668382437.png

 

 

Now, the result will be like, 

Vinsinfo_2-1715668346099.png

 

 

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