Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

BG video visible underneath full-bleed project photos


joshroos

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

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
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...