A user is experiencing issues with video background sizing on mobile devices in Shopify’s Dawn Theme v11.0.0. The video displays correctly on desktop but doesn’t fit mobile screens properly—users must rotate their phones horizontally to view it.
Attempted Solutions:
base.css targeting .Background.fullscreen-video-wrap with min-height: 600px and position: relative for screens under 767px.Background.fullscreen-video-wrap set to min-height: 550pxCurrent Status:
The issue remains unresolved. The first suggested fix made the video “extra thin” and didn’t fit properly. The second solution also failed to work. The discussion is ongoing with no effective solution found yet.
Hello, i would like to solve the video background size on mobile for DAWN 11.0.0 Theme, i tried most of codes that shopify community solvers provided and nothing worked, the following code as an example,
@media screen and (max-width: 749px) {
.banner .banner__content:before {
padding-bottom: 100%!important;
}
}
Webpage : https://springandrepublic.com/
@Horus-Wings , what do you want to do with the video background?
i already have video background on my webpage, its size fits desktop browsing size, but its not matching mobile screen size, when you browse webpage using mobile screen you have to rotate screen horizontally to see video fitting screen.
@Horus-Wings , go to base.css and add the following code :
@media (max-width:767px){
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 600px !important;
}
}
Working but made video extra thin than before, not fitting good
@Horus-Wings , what do you mean by extra thin?
Hi,
Use the following code, it will make it resize to fit the mobile screen:
@media only screen and (max-width: 768px)
.videoBackground .fullscreen-video-wrap {min-height: 550px;}
let me know if you acheived what you need by marking this is a solution.
Not working
code not effective