Video Banner header text and button not displayed on mobile

Store Design
, ,

Topic summary

A user implemented a video banner on their Shopify store but encountered display issues across devices:

Problems identified:

  • Desktop: Video gets cut off/cropped
  • Mobile: Text and buttons from desktop version not displaying; visible text has formatting issues
  • Additional issue: Unable to remove search icon despite trying various code solutions

Solutions provided:

One contributor suggested adding custom CSS code to theme.liquid above the </body> tag to fix text display issues. They also recommended using separate videos for desktop (portrait orientation) and mobile (current square video) for better user experience.

Another contributor provided CSS code to adjust font sizes:

  • Desktop text increased to 24px
  • Addresses the issue of desktop text being too small and mobile text too large

The code should be added via: Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS

Current status: The user reports partial success but still needs help with text sizing across devices. The consensus is that using device-specific videos would provide the optimal solution.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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:

Screenshot 2024-12-27 at 7.32.12 PM.png
Screenshot 2024-12-27 at 7.32.12 PM.png2522×1328 271 KB

what its supposed to look like:

Screenshot 2024-12-27 at 7.32.46 PM.png
Screenshot 2024-12-27 at 7.32.46 PM.png1824×1538 346 KB

current mobile view:

Screenshot 2024-12-27 at 7.32.35 PM.png
Screenshot 2024-12-27 at 7.32.35 PM.png1074×1062 142 KB

2

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

3

Hello,

You can add the below code in theme.liquid above

See the screenshots below:
Mobile

shreyhweb_0-1735350492793.png
shreyhweb_0-1735350492793.png406×560 170 KB

Desktop:

shreyhweb_1-1735350730294.png
shreyhweb_1-1735350730294.png1893×882 173 KB

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

4

Hi @spacewithak

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

image.png
image.png350×583 110 KB

Best,

Daisy

5

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!

6

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

7

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:

image_720.png
image_720.png720×313 194 KB

I hope this helps

Best,

Daisy

1 Like
8

You need to use two videos for this section.