Help with edit Custom CSS for Multi-column section

[ENYALYË]

Hi!

I'm currently making a few improvements to my Shopify store and need some help with a multi-column section, in which I'll have a video next to an image. I am not a coder and have lent on ChatGPT to help me create some custom code for the Custom CSS. 

In a nutshell, the video seems to be much taller than the image and so I added some code to resize the video. However, the 'Column Title' and 'Content' text is not shifting up to align with that for the image. I have tried to insert some code, which ChatGPT provided however, the video disappears. 

I have added an image, to show what I am talking about. The code I entered into the 'Custom CSS' box is:

.multi-column img,
.multi-column video {
width: 100% !important;
height: auto !important;
max-width: 500px;
max-height: 600px;
object-fit: cover;
}

I would greatly appreciate any advice you have to offer. Maybe there is a better way to do this? Thank you!

[ENYALYË]

Apologies, this is the code I entered where the 'Column Title' and text does shift up however the video disappears:

.multi-column img,

.multi-column video {

  width: 100% !important;

  height: auto !important;

  max-width: 500px;

  max-height: 600px;

  object-fit: cover;

}

.multi-column__item {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.multi-column video {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  height: 600px !important;

  object-fit: contain !important;

  background: none !important;

}

Thank you so much in advance, for any guidance on this!

[Moeed]

Hey @ENYALYË 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[ENYALYË]

Hey Moeed, 

Thank you! My store URL is: https://enyalye.com/. 

However, I'm currently working on a draft version of the store, which I will publish once planned design changes have been made. You'll see an existing site published however, I'm in the process of making design changes to this. As such multi-column element I'm referring to won't appear on the live store.

I'm sorry, new to all of this and so please feel free to ask any questions that might help!

Thanks, 
Akbar

[Moeed]

Can you share the preview URL of the draft theme? When you preview your draft theme, in the bottom you will see a Share Preview button, just simply share that link with me.

Best Regards,

Moeed

[ENYALYË]

Ah yes! Thanks so much 🙌🏽.

Here it is: https://2rcwy94pzg7t1qwl-85916418375.shopifypreview.com

[Moeed · Accepted solution]

Hey @ENYALYË 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
video-media {
    height: 600px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ENYALYË]

Amazing, this worked! Thanks so much 🙌🏽

I'm guessing it's normal for it to look misaligned on the theme editor but perfectly placed on the preview site? 

Thanks so much 

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.