All things Shopify and commerce
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
Solved! Go to the solution
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;
}
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;
}
}
nothing happens when I paste in the code..
Have you used my code?
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%;
}
it made my site look like this:
but hey it made the video full width...so something went right lol
wait let me check. remove the code
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 you got a solution the Accept the solution and like the solution.
nothing happens when I insert the code
see this.
.rte {
color: #333232;
max-width: 300%;
margin-left: -18%;
margin-right: -165px;
}
Use this code to get fullscreen width.
hi, it's full width on laptop, but it's not responsive for different devices
let me check on mobile view
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;
}
thankyou so much! that worked!!
Hi,
The script didn't work for me. Is it for the debut theme?
Many thanks,
Rich
07883377248
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!
attached.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024