How can I adjust video size for mobile view on my product page?

Store Design
, , , , , , ,
1

Hi,

I added a video on my product page by adding a custom liquid section

I would like to edit the size of the video on my product page on mobiles.

  • This is 60% width on desktop but I would like 100% on mobiles.

  • Also, only on desktop, I would like to align this video on the left & add text on the right side.

Thanx for your help

Alex

2

Hi @Alex087

You can follow the following steps:

  1. Please go to the Online Store
  2. Then Edit Code
  3. Please find the theme.liquid file
  4. And add the following code in theme.liquid file above the tag

laddisahsi_0-1695033132494.png
laddisahsi_0-1695033132494.png1439×772 51.8 KB

laddisahsi_1-1695033159664.png
laddisahsi_1-1695033159664.png656×682 24.7 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

1 Like
3

Hi @laddisahsi

I didn’t work

video is on my product page, wasn’t written sorry

Thanks

4

@Alex087

Please try this css

.section-template--19674055147849__f6045e55-69df-4fac-8520-7e6b34edfdfd-padding video {
    min-width: 60% !important;
    margin-right: 35% !important;
}

@media only screen and (max-width: 600px) {
.section-template--19674055147849__f6045e55-69df-4fac-8520-7e6b34edfdfd-padding video {
    min-width: 100% !important;
}

}

laddisahsi_0-1695033871626.png
laddisahsi_0-1695033871626.png1439×800 166 KB

1 Like
5

thanx @laddisahsi !

What do I have to edit to decrease the width from 60 to 40 on desktop?

Also, on desktop, is it possible to add text on the right of the video?

6

Please decrease min width property

1 Like
7

I did, but this is not changing on desktop

8

@Alex087

use this

laddisahsi_0-1695035157603.png
laddisahsi_0-1695035157603.png1422×796 262 KB

1 Like
9

thanks, do you know if i can add a text section on the right of the video?

10

@Alex087

Have to add the text block inside the video section then set that section according to design.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

1 Like
11

Thanks Laddisahsi,

can you help me how to add this text in the video section please? I’m confused

12

Hi @laddisahsi

I’ve changed my video on my product page, but I’m not able to align this new one on the left on desktop (same left margin than my other section), and being 100% on mobiles,

Thanks for your help

Alex