Gray bars on mobile montage video 7.0 version

Hello,

I recently added a button to my montage video and while the mobile/tablet versions look great, it added unwanted gray bars atop my mobile interface. 

Does anyone know how I can eliminate the gray at the top and bottom of my montage video?

Thanks,

Nathan

Hi,

What is page url?

Add this code in custom css:

@media screen and (max-width: 430px) {
  body.homepage .Parallax-item:first-child iframe{

width: 495.225px !important;

}

Sorry for the late reply - that took care of it! 

Thanks, much appreciated!

One quick follow up - is there a way to get "director/producer/cinematographer" all included on the top on the mobile version?

Right now, "director" gets cut off. 

URL is nathanpalm.com

Thanks! 

On 1/23/2024 at 1:31 AM, Napalm said:

One quick follow up - is there a way to get "director/producer/cinematographer" all included on the top on the mobile version?

Right now, "director" gets cut off. 

URL is nathanpalm.com

Thanks! 

I see you delete "director" from the code. Do you still need help?

Got it, thanks!

Is there a way to make the font for "director/producer/cinematographer" slightly smaller on mobile?

Right now I'm only able to change the size of "Nathan Palm" on the mobile interface. 

Thanks! 

On 1/26/2024 at 12:55 AM, Napalm said:

Got it, thanks!

Is there a way to make the font for "director/producer/cinematographer" slightly smaller on mobile?

Right now I'm only able to change the size of "Nathan Palm" on the mobile interface. 

Thanks! 

Use this CSS code

a.Mobile-bar-branding:after {
    font-size: 8px !important;
}

Thanks! LAST THING... is there a way to correct the top of my page on tablet without messing up desktop and mobile (I like how those currently are)?

The tablet version has everything smashed together. I'd prefer this look either like the desktop or mobile version - whichever is easier to format. 

Thanks for your help!

Try this CSS code, it will improve a bit

@media screen and (max-width:900px) and (min-width:641px) {
[data-nc-container="top-center"] {
    flex-direction: column-reverse;
    flex: 1 1 50% !important;
}

a.Header-branding {
    width: 100%;
}
}