how to make a video full width in debut theme

Solved
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)

Accepted Solutions
ZestardTech
Shopify Expert
3501 579 805

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
3501 579 805

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
Zworthkey
Shopify Partner
5581 641 1500

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%;
}
If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
tiff0067
New Member
8 0 0

nothing happens when I paste in the code..

Zworthkey
Shopify Partner
5581 641 1500

Have you used my code?

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
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 641 1500

wait let me check. remove the code

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Zworthkey
Shopify Partner
5581 641 1500

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Zworthkey
Shopify Partner
5581 641 1500

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
tiff0067
New Member
8 0 0

nothing happens when I insert the code

Zworthkey
Shopify Partner
5581 641 1500

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Zworthkey
Shopify Partner
5581 641 1500
.rte {
    color: #333232;
    max-width: 300%;
    margin-left: -18%;
    margin-right: -165px;
}

Use this code to get fullscreen width.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
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 641 1500

let me check on mobile view 

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
ZestardTech
Shopify Expert
3501 579 805

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!!

LanaH
New Member
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

rich831
Excursionist
21 0 8

Hi,

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

Many thanks,

Rich

07883377248