Solved

White margin around background video

JPham
Tourist
3 0 0

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

123.PNG

 

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

 

@ZestardTech 

@oscprofessional 

Accepted Solutions (2)
GemPages
Shopify Partner
5588 1261 1203

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:

GemPages_0-1670216294486.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

oscprofessional
Shopify Partner
15834 2369 3072

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

oscprofessional_0-1670219465716.png

 

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

oscprofessional_1-1670219626384.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5588 1261 1203

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
JPham
Tourist
3 0 0

https://plugmeluxury.com/ 

 

Try this URL 🙂

GemPages
Shopify Partner
5588 1261 1203

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:

GemPages_0-1670216294486.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
JPham
Tourist
3 0 0

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_0-1670373399953.pngJPham_1-1670373426686.png

 

 

oscprofessional
Shopify Partner
15834 2369 3072

@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

oscprofessional_0-1670479245660.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

oscprofessional
Shopify Partner
15834 2369 3072

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

oscprofessional_0-1670219465716.png

 

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

oscprofessional_1-1670219626384.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing