BG video visible underneath full-bleed project photos

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

Hi, 

I am having an issue where my background video is still visible at the top of my portfolio page when hovering on project links that display full-bleed photos. 

Website here: https://www.roosbrothers.com

Any idea why this is happening?

Thank You!

Hello Josh,

Really cool website by the way! But the reason this is happening is because you have a transparent header selected, what this means is that the header will inherit the background of the section, which is a video background. The only way to fix this within the options squarespace provides is to select a non-transparent background but I realize this kind of ruins the vibe of the landing page...

So, we can use some custom CSS for this page. 

Try this code below and let me know if this solves the video background issues.

section[data-section-id="5fad6ef6e741ef42c9b5b663"] {
.page-section:first-child {
padding: 0 !important;
	}
}

Thanks @Wolfsilon!

I tried your code but it didn't seem to fix the issue. I used the code below and it fixed the issue on the portfolio page, but now if you view the "about" page, the BG photo is no longer full-bleed at the bottom. 

main .page-section:first-child {
   padding-top: 0px!important; 
}

Is there another way to only target the portfolio page with this code?

Thanks!

On 6/20/2021 at 10:49 AM, joshroos said:

Thanks @Wolfsilon!

I tried your code but it didn't seem to fix the issue. I used the code below and it fixed the issue on the portfolio page, but now if you view the "about" page, the BG photo is no longer full-bleed at the bottom. 

 

main .page-section:first-child {
   padding-top: 0px!important; 
}

 

Is there another way to only target the portfolio page with this code?

Thanks!

use this code

body.homepage .page-section:first-child {
   padding-top: 0px!important; 
}

7 hours ago, tuanphan said:

use this code

body.homepage .page-section:first-child {
   padding-top: 0px!important; 
}

 

@tuanphanthat did it - thank you!

On 6/21/2021 at 9:11 PM, joshroos said:

@tuanphanthat did it - thank you!

Do you need fix these?

Site URL – https://www.roosbrothers.com/

1. (Mobile – Homepage) Increase text width?

https://www.roosbrothers.com/

2. (Mobile – Menu) Reduce text size?

3. (Mobile – Header) Header is transparent, so when scrolling down, it overlaps the text below.

https://www.roosbrothers.com/about

On 7/10/2021 at 8:41 AM, tuanphan said:

Do you need fix these?

Site URL – https://www.roosbrothers.com/

1. (Mobile – Homepage) Increase text width?

https://www.roosbrothers.com/

2. (Mobile – Menu) Reduce text size?

3. (Mobile – Header) Header is transparent, so when scrolling down, it overlaps the text below.

https://www.roosbrothers.com/about

 

 

 

Yes @tuanphan, could you help me fix these errors?

On 7/12/2021 at 11:48 PM, joshroos said:

Yes @tuanphan, could you help me fix these errors?

Q1. Q2. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* portfolio title width */
span.portfolio-hover-item-content {
    white-space: nowrap;
}
div.header-menu-nav-item a {
    font-size: 6rem;
    white-space: nowrap;
}
}