Jump to content

BG video visible underneath full-bleed project photos

Recommended Posts

  • Replies 7
  • Views 1k
  • Created
  • Last Reply

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;
	}
}

 

Link to comment

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!

Link to comment
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; 
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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/

roosbrothers.com-01-min.png

2. (Mobile – Menu) Reduce text size?

roosbrothers.com-02-min.png

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

https://www.roosbrothers.com/about

roosbrothers.com-03-min.png

 

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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/

roosbrothers.com-01-min.png

2. (Mobile – Menu) Reduce text size?

roosbrothers.com-02-min.png

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

https://www.roosbrothers.com/about

roosbrothers.com-03-min.png

 

 

 

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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.