Wrong text alignment and overlay on homepage section unsolvable - debut theme

[gnaro]

Hi all,

I recently added a custom section on my store: Www.NoPineappleOnPizza.com
it’s a loop video background with a text that is displayed over the video on the desktop version and it is supposed to do the same on mobile version, but it doesn’t. On top of this, the text alignment is left, even though I want to get a center position.

So, for both mobile and desktop I need a central alignment and for the mobile version I need the text overlay the video, as per picture shows:

How can I sort it out ?
I appreciate any help and possible suggestions.

thanks

[PageFly-Victor]

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Regard your concern to overlay text and center align it. Please help me to add some custom code to your theme css file. Should follow these steps below

Step1: Online store > Themes > Edit code > Search :.css and select the file

Step2: paste this code to very end of the file

@media screen and (max-width: 767px){

.videoBackground .videoBoxInfo {

background: unset !important;

position: relative;

top: -13em;

z-index: 999;

}

.videoBoxInfo > * {

text-align: center;

}

}

But you will have this grey box because the height of the video do not full :

https://prnt.sc/EnYVrOg1dCBv

Please change the px value to match with your requirement.

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

[LitCommerce]

Hi @gnaro ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
	.videoBackground .videoBox {
		display: block !important;
		min-height: auto !important;
	}
	.videoBackground .overlay {
		opacity: 0 !important;
	}
	.videoBackground .videoBoxInfo {
		position: absolute !important;
		left: 10% !important;
		top: 10% !important;
		background: transparent !important;
		z-index: 999 !important;
	}
}

it will display fine:

[gnaro]

Hi,

but that keeps the alignment center, Is possible to change it?

[LitCommerce]

Hi @gnaro ,

Please change code:

@media screen and (max-width: 767px) {
	.videoBackground .videoBox {
		display: block !important;
		min-height: auto !important;
	}
	.videoBackground .overlay {
		opacity: 0 !important;
	}
	.videoBackground .videoBoxInfo {
		position: absolute !important;
		left: 10% !important;
		top: 0% !important;
		background: transparent !important;
		z-index: 999 !important;
                text-align: center !important;
	}
        .videoBackground .videoBoxInfo *{
                text-align: center !important;
	}
}

it will show like this:

Hope it helps!

[gnaro]

where do I have to paste it?

thanks for your help.

[LitCommerce]

Hi @gnaro ,

Go to Actions > Edit code > Assets > theme.css and paste this at the bottom of the file.

Hope it is clear to you.