KatieEdieChalk

Site URL: https://www.vanitybrothers.com

Hello,

I have tried various solutions to make my homepage video block full bleed on desktop and mobile but am failing miserably.  Is anyone able to help?

Many thanks,

Katie

password: vanity

It's fixed.  I am extremely grateful.  Thank you.

Site URL: https://www.vanitybrothers.com

Hello, 

I have pasted the following custom css to prevent my homepage banner video resizing on mobile.  I am left, however, with some padding left and right (see screenshot).  

Does anyone know how I might remove this in order that the video is full width?  

The site is vanity brothers.com, password 'vanity'.  

Thank you, Katie

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width: 100% !important;
        left: 0 !important;
        height: auto !important;          inset: unset !important;
        top: 0 !important;
        height: 200px !important;
    }
  
body.homepage .Parallax-item:first-child figure.Index-page-image.loaded {
    transform: unset !important;
    bottom: 0 !important;
    height: 200px !important;
}
section#vanity-brothers-showreel {
    height: 200px !important;

  }}

May I clarify the point "you should check original video, I see it has padding on left/right side"?  Should I ask the client to prepare the video to different dimensions?  How can they reduce the padding, assuming it's relating to the original video preparation rather than the template styling.

Many thanks

Thank you very much, that's definitely helped.  Is there anyway to reduce the black border (to the sides and bottom) completely?  

See screenshot.

Hi there,

I've been following this thread as having the same issue.  I'd like to stop my homepage video resizing on mobile viewing.  I've successfully managed this through copying and pasting the code below.

I do, however, now have a background black box showing as per the attached screenshot.  Any thoughts as to how I might work around this would be much appreciated.

https://rhombus-dachshund-pwjt.squarespace.com

password: vanity

Many thanks.

Katie

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
        inset: unset !important;
        top: 0 !important;
        height: 200px !important;
    }
body.homepage .Parallax-item:first-child figure.Index-page-image.loaded {
    transform: unset !important;
    bottom: 0 !important;
    height: 200px !important;
}
section#new-page-2 {
    height: 250px !important;
}}

Thank you

Sure, thank you.  It's Squarespace2022.

Site URL: https://maracas-reindeer-4jc6.squarespace.com/

Hello,

I am looking for some custom code which will increase the banner height of only the first image on my homepage only.  The custom settings seem to apply to either all the banner images on the homepage, or the first images on all the pages (which you'll see, on most pages except for the services pages, is now giving me too much white space below the navigation bar and above the first line of text.  I've tried a few things from other support threads but, as yet, with no success.

Any help would be much appreciated.

Thank you,

Katie

Fabulous and thank you so much.  I've managed it.

Yes I can do that.  Here you go....

https://recorder-mandolin-lfkk.squarespace.com

p/w Squarespacehelper

Thank you.

It's not live at the moment.  I can add you as a collaborator?

42 minutes ago, tuanphan said:

.desc-wrapper *

Thank you but sadly it's not working.  

What do I write instead of 'H1' for the banner heading text?

h1 {font-family: 'DELICATESCRIPT'; 

letter-spacing:'2px';    

font-size:50px;    

}

Hiya

Does anyone know the CSS code for Banner Heading Text?  I've managed to alter H1 and H2 but can't seem to find the codes for the banner fonts.  I'm using the Hayden template.

Thank you.