How can I adjust the height and width of a video section?

Hey There! I have a video section that I want to change the height and width of. On mobile, I like the current size but on desktop the size of the video section is much too big. I would like to make it smaller. Any ideas how to do this?

Link: https://obrcf218ldb954jf-81877893427.shopifypreview.com

@WK100

Hello,

You can add below code above in theme.liquid

online store >> edit code >> theme.liquid


after added code

if our solution is helpful for you then please like the post and tap on accepted.

Thankyou

Hey @WK100

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 tag


RESULT:

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

Best Regards,
Moeed

@shreyhweb Hey! Where exactly do I need to copy this code? I am pasting it at the bottom above but it is not working. It looks like this:

Please apply the code and message us. i will check what the issue on there.

Hey @Moeed ! I applied the code but it is still looking the same. I have left the code up for you to see. Any ideas why this is not working for me?

Please try this code


Yes @shreyhweb ! That worked but now the issue is that it is not centered in the screen. How do I do that?

we are update this code please copy again and use it.

Are you clear now?

are you using this below updated code?


@Anonymous This is working but when I play the video it moves to the right. See below:

Before I hit play (looks good):

After I hit play (moves to the right. I want it to stay centered):

@WK100

hey, there a different issue rise after playing video.

Please replace the previous code with the below code.


I hope everything is right now?

Please also like the post.

Thankyou :slightly_smiling_face:

Yes! Thank you @shreyhweb

@WK100

Welcome, we are always here for your help.

You can also contact us on whatsapp or email.

Thankyou have a nice day :slightly_smiling_face:

I love how infrequently these “solutions” work and how everyone offering them is way more concerned with us liking these awful solutions and unclear instructions. Earn it first! Please!

Here’s how you can adjust the height and width of the video section for different devices using HTML and CSS:

Video Section /* Styles for desktop */ @media screen and (min-width: 768px) { .video-section { width: 50%; /* Adjust the width as per your preference */ height: auto; /* Allow the height to adjust proportionally */ } }

/* Styles for mobile /
@media screen and (max-width: 767px) {
.video-section {
width: 100%; /
Set to full width on mobile /
height: auto; /
Allow the height to adjust proportionally */
}
}

/* Additional styles /
.video-section {
/
Add any other styles you need for the video section */
}

Still doesn’t work