Solved

how to make a video full width in debut theme

tiff0067
New Member
8 0 0

hi! 

I've been searching for a solution to make video full width. Is there any custom code I can add in my html, whenever I want my video to be full width? or something:) 

here's my site: https://lashouts.com/pages/loyalty-and-rewards

Accepted Solution (1)
ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file. 

.page-width .rte {
color: #333232;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.rte video#heej {
width: 100vw;
margin-left: -50vw;
left: 50%;
position: relative;
max-width: unset !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 17 (17)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.medium-up--five-sixths {
width: auto!important;
}
}
@media only screen and (min-width: 750px){
.medium-up--push-one-twelfth {
left: 0!important;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
tiff0067
New Member
8 0 0

nothing happens when I paste in the code..

Zworthkey
Shopify Partner
5581 642 1565

Have you used my code?

Zworthkey
Shopify Partner
5581 642 1565

Hi,

use this code 

@media only screen and (min-width: 750px)
.medium-up--push-one-twelfth {
    left: .33333%;
}
@media only screen and (min-width: 750px)
.medium-up--five-sixths {
    width: 100.33333%;
}
tiff0067
New Member
8 0 0

it made my site look like this: Skærmbillede 2021-02-19 kl. 12.14.38.png

 

but hey it made the video full width...so something went right lolSkærmbillede 2021-02-19 kl. 12.14.43.png

Zworthkey
Shopify Partner
5581 642 1565

wait let me check. remove the code

Zworthkey
Shopify Partner
5581 642 1565

hi, 

add this code in the theme. scss

.rte {
    color: #333232;
    max-width: 300%;
    margin-left: -15%;
    margin-right: -130px;
}

 

 

 I hope it will be most helpful for you.

Thank you

Zworthkey
Shopify Partner
5581 642 1565

If you got a solution the Accept the solution and like the solution.

tiff0067
New Member
8 0 0

nothing happens when I insert the code

Zworthkey
Shopify Partner
5581 642 1565

see this.f88c3da5-2fb1-41a0-b4c0-d17dd48f4989.png

Zworthkey
Shopify Partner
5581 642 1565
.rte {
    color: #333232;
    max-width: 300%;
    margin-left: -18%;
    margin-right: -165px;
}

Use this code to get fullscreen width.

tiff0067
New Member
8 0 0

hi, it's full width on laptop, but it's not responsive for different devices

Zworthkey
Shopify Partner
5581 642 1565

let me check on mobile view 

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file. 

.page-width .rte {
color: #333232;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.rte video#heej {
width: 100vw;
margin-left: -50vw;
left: 50%;
position: relative;
max-width: unset !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
tiff0067
New Member
8 0 0

thankyou so much! that worked!!

rich831
Excursionist
21 0 8

Hi,

The script didn't work for me. Is it for the debut theme?

Many thanks,

Rich

07883377248

LanaH
Visitor
3 0 0

Hi,

Thank you so much for sharing! I have been trying to increase the size of my video for AGES! This has solved the issue...but it has created another. It appeared to have shifted all of the sections that use 2+ columns. So the writing will go over the image (See images attached) I use the same Debut theme.

Is there a way to fix/avoid this issue? Any advice would be greatly appreciated! 
Screenshot 2021-06-10 at 3.06.59 PM.pngattached.Screenshot 2021-06-10 at 3.06.50 PM.png