3 Videos Side by Side

Technical Q&A
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!

2

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

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

Hi there,

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

Page example.jpg
Page example.jpg2295Ă—1363 63.9 KB

Do you have any suggestions?

Thank you,

Marina

4

@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 “” like in the attached screenshot.

Vinsinfo_3-1715668382437.png
Vinsinfo_3-1715668382437.png1027Ă—489 27 KB

Now, the result will be like,

Vinsinfo_2-1715668346099.png
Vinsinfo_2-1715668346099.png639Ă—526 272 KB

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

1 Like
5

Add This css in your edit code > theme.liquid file**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;
   }
}
1 Like
6

Thank you! That worked :slightly_smiling_face:

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!

7

Add This css in your edit code > theme.liquid file**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;
    }
}
1 Like