Need help with mobile version of my client's website

Store Design
1

Hi everyone,

I recently added a video background on my client’s website from a Youtube video I watched. But the site doesn’t look right when its on Mobile version compared to its Desktop version. This is my top concern right now.

This is how it looks like on Desktop mode

redroyaltyroom_0-1635999909787.png
redroyaltyroom_0-1635999909787.png1912×880 333 KB

And this is how it looks like on Mobile mode

redroyaltyroom_1-1635999950616.png
redroyaltyroom_1-1635999950616.png362×602 174 KB

This is the website - https://mereical.myshopify.com/

I only know a few HTML/CSS coding so I’m stuck. Hoping y’all can help me out. Thank you!

2

@redroyaltyroom

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media screen and (max-width: 767px) {
.videoBackground .videoBox {min-height: 380px !important;}
}
3

Hello!

Thank you so much for replying with a solution, I appreciate it a lot.

Although I’m having another problem because the black area is appearing below the video banner

redroyaltyroom_0-1636082123880.png
redroyaltyroom_0-1636082123880.png476×767 284 KB

Can you help me with this? Thank you.

1 Like
4

@redroyaltyroom

thanks for update

sorry but this part of video we’re doesn’t modification to code sorry