text not on overlay on mobile video - debut theme -

Store Design
1

Hi all,

I am struggling with the mobile version of my store https://nopineappleonpizza.com/

If you look at the store, you see both versions.

Looking at the desktop style, you see the “Picnic Amore” and " It is love at first sight" with SPOP NOW all overlaid on the video ( even though the alignment is left style and I want a central one.

If you switch to the mobile, you see all the written sentences posted below the video.

I am looking to get the same result as the desktop version.

For clearance, I am attaching a video so you can better understand the issue itself.

I appreciate anyone who will support me.

Sincerely

Fabio

2

@gnaro
Hello,

@media screen and (max-width: 767px){
.videoBackground .videoBox {
  min-height: 300px !important; 
}
.videoBackground .videoBoxInfo {
  padding: 20px 20px;
  background: transparent;
  width: 100%;
  position: absolute;
  z-index: 9999;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

if this solution its useful so please Like and Accept Solution

Like This

oscprofessional_0-1659079030875.png
oscprofessional_0-1659079030875.png401×577 179 KB

3

Hi !

thanks for the reply.

I have seen the alignment is left. Is there any chance I get the central one?

thanks

4

@gnaro

@media screen and (max-width: 767px)
.videoBackground .videoBox {
min-height: 300px !important;
text-align: center !important;
}
.videoBoxInfo {
	text-align: center !important;
}
.videoBackground .imageBoxInfoDescriptio{
text-align: center !important;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

if this solution its useful so please Like and Accept Solution
Like This

oscprofessional_0-1659336478686.png
oscprofessional_0-1659336478686.png374×490 186 KB

5

Hi Oscprofessional

Thanks for getting your hands on it.

Unfortunately, both solutions didn’t work for both desktop and mobile store. I have deleted the last code and restored it to the previous version. I am linking a video so you can get a better understanding of what’s going on.

6

Hi!

Thanks for the time you have spent.

Following a similar topic I wrote (link attached below), I am still struggling with alignment on the video background and the mobile version.

https://community.shopify.com/c/shopify-design/justify-text-alignment-debut-theme/td-p/1672202

My hands are tied, so I would appreciate any further suggestions.

Thanks so much for your passion for replying