Video Banner header text and button not displayed on mobile

[spacewithak]

I've implemented a video banner onto my site using the code from the paste bin "video banner para Shopify" page

Then I tried this code to attempt at correcting the text and buttons not showing on mobile from paste bin "fix banner text page" (forum will not let me attach their links)

The video size gets cut off on desktop, but appears to be fine on mobile. However, on mobile- not all the text that I have on desktop is showing, and the part that is showing is off formatting wise. I would appreciate if someone could help correct the desktop size so that the video is not cut off (see attached photos) and if the desktop text and buttons could reflect on mobile as well. I also keep trying to remove the search icon and no code solution has worked.

Site: https://www.annakaiserstudios.com

current desktop view:

what its supposed to look like:

 current mobile view:

 

 

[suyash1]

@spacewithak - did you remove it from your home page?

[shreyhweb]

Hello,

You can add the below code in theme.liquid above </body>

<style>
@media screen and (min-width: 1320px) {
    .banner.video-background {
        min-height: 85vh!important;
    }
}
@media screen and (max-width: 749px) {
    .banner.video-background:not(.banner--mobile-bottom) .banner__content {
        min-height: 35rem!important;
    }
}
</style>

See the screenshots below:
Mobile

Desktop:

Now, You are using the square size video for desktop so i suggest you need to add both device videos separate One for the Desktop(Portrait size) and the current video you can use for mobile for the better user interface.

I hope you understand this thing.

Thank you 

[spacewithak]

how would I change the size of the video from square size to portrait for desktop only?

[shreyhweb]

You need to use two videos for this section.

[DaisyVo]

Hi @spacewithak 

I saw that it look pretty good. Do you need any help?

Best,

Daisy

[spacewithak]

I think I fixed it aside from the desktop text now being way too small, and the mobile text being way too large if you could help with this!

[DaisyVo]

Hi @spacewithak 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 1024px){
.banner__box.content-container * {
    font-size: 24px !important;
}
}

Here is the result: 

I hope this helps

Best,

Daisy