Shopify themes, liquid, logos, and UX
Hey
I have this background video on my website, but when it is in phone mode, there are white margins above and under the background video.
I guess this can be fixed through the CSS code. I made a custom section called video-background.liquid
<style>
.main-content .videoBackground {
margin-top: -80px;
max-height: 100%;
height: 100%;
}
.videoBackground {
position: relative;
max-height: 100%;
height: 100%;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
max-height: 100%!important;
height: 100%!important;
max-width: 160%!important;
width: 160%!important;
object-fit: flex;
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: -100%;
object-fit: absolute;
}
.videoBackground .videoBox {
display: flex;
align-items: flex;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: flex;
background-position: flex;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: flex;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 50px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #00000;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 1000px;
margin: 135px!important;
text-align: left!important;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 95px;
line-height: 150px;
text-align: down!important;
margin: -40px!important;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 100%) {
.main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
min-height: 500px;
height: 100%;
position: relative;
padding: 0;
}
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
}
.videoBackground .videoBoxInfo {
padding: 40px 20px;
background: #000;
width: 100%;
}
}
</style>
Solved! Go to the solution
This is an accepted solution.
Hello @JPham ,
I would like to give you the recommendation to support you.
Let's find the code line named .videoBackground .videoBox, after that, change the value of height to auto:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
This is an accepted solution.
@JPham
Hello,
@media screen and (max-width: 600px) {
.videoBackground .videoBox {
height: auto;
}
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
or
@media screen and (max-width: 600px) {
.videoBackground .videoBox {
height: auto;
min-height: auto !important;
}
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
Hello @JPham ,
It's GemPages support team and glad to support you today.
Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
This is an accepted solution.
Hello @JPham ,
I would like to give you the recommendation to support you.
Let's find the code line named .videoBackground .videoBox, after that, change the value of height to auto:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Thanks, it worked! But now i have a similar problem. If you look at the same URL, i tried adding a title text and i am having trouble to shrink/minimize it to fit in the phone screen as well.
CSS:
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #00000;
font-size: 60px;
width: 800px;
line-height: 100px;
min-height: 200px;
height: 300px;
text-align: right!important;
@JPham
Hello,
h1.videoBoxInfoTitle {
font-size: 34px;
width: 70% !important;
line-height: 50px !important;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
This is an accepted solution.
@JPham
Hello,
@media screen and (max-width: 600px) {
.videoBackground .videoBox {
height: auto;
}
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
or
@media screen and (max-width: 600px) {
.videoBackground .videoBox {
height: auto;
min-height: auto !important;
}
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
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