Jump to content

Portfolio Hover:Background does not change full background anymore

Recommended Posts

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

Hey forum,

I've spent the last 4 days changing from wix to squarespace and completely rebuilding my photography portfolio. So far I've been very pleased with Squarespace and did not face any big troubles. However, just as I'm about to finish the hover effect on my landingpage stopped working properly. 

https://www.marcelohm.com/

The hover effect is supposed to change the full background image upon hovering and as I set up the site everything worked just fine. Yesterday when I got into the builder the site started displaying a small portion of the standard background image at the top of the screen. I've tried every option that I can think of, regarding the header and the portfolio element, but I can't get it back to working properly. 
Any help in resolving this issue is much appreciated. 

Screenshot (141).png

Link to comment

I'm having the exact same issue as Marcel. Everything was working fine a few days ago on my portfolio until I checked in today.

Any help or update on this issue would be much appreciated. The sudden appearance of this visual bug leads me to think there's something wrong with squarespace itself?

 

Link to comment
15 hours ago, Murli_S said:

Any help or update on this issue would be much appreciated. The sudden appearance of this visual bug leads me to think there's something wrong with squarespace itself?

 

Yes. I also think it's a problem on Squarespace side. I tried it on numerous devices to check if it had  something to do with any form of cache and I also set up a completely new test site that had nothing done to it. Both did not resolve the issue. 

Link to comment
16 hours ago, Murli_S said:

I'm having the exact same issue as Marcel. Everything was working fine a few days ago on my portfolio until I checked in today.

Any help or update on this issue would be much appreciated. The sudden appearance of this visual bug leads me to think there's something wrong with squarespace itself?

 

 

1 hour ago, marcelOhm said:

Yes. I also think it's a problem on Squarespace side. I tried it on numerous devices to check if it had  something to do with any form of cache and I also set up a completely new test site that had nothing done to it. Both did not resolve the issue. 

Add to Design > Custom CSS > Then save & reload your site

/* Fix portfolio */
body.homepage article section:first-child {
    padding-top: 0 !important;
}

 

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

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
4 hours ago, tuanphan said:

 

Add to Design > Custom CSS > Then save & reload your site


/* Fix portfolio */
body.homepage article section:first-child {
    padding-top: 0 !important;
}

 

Worked perfectly! thank you. Do you have any idea why the square space portfolio pages suddenly stopped working like before?

Link to comment
14 hours ago, Murli_S said:

Worked perfectly! thank you. Do you have any idea why the square space portfolio pages suddenly stopped working like before?

Not sure. Recently I haven't worked with Portfolio yet..

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

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
19 hours ago, Murli_S said:

Hi again @tuanphan. I noticed an issue with the portfolio page using your code. When trying out the mobile version of the portfolio the sub-images are offset. See attached examples:

 

Any idea on how to fix this?

 

Can you share site url? We can check easier

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

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
23 hours ago, Murli_S said:

sure!

website: murlisoogrimart.com

pw: murli1234

 

Looks great on desktop but breaks on mobile

Try adding to Design > custom CSS

 /* Fix mobile portfolio */
@media screen and (max-width:767px) {
.portfolio-hover[data-mode="hover-cover"][data-height="small"] {
    min-height: 100vh !important;
}
}

 

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

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
2 hours ago, tuanphan said:

Try adding to Design > custom CSS


 /* Fix mobile portfolio */
@media screen and (max-width:767px) {
.portfolio-hover[data-mode="hover-cover"][data-height="small"] {
    min-height: 100vh !important;
}
}

 

Thank you for taking your time to help! unfortunately didn't work. There's still an issue when hovering over the portfolio links. See attached gif:

portfolioissue.gif

Link to comment
15 hours ago, spage said:

I'm also having this issue any advice would be appreciated.  The custom CSS that @tuanphanhas linked isn't working for me.  Hoping Squarespace fixes this issue.

 

My website: reachsam.com

The work section is what's having the issues.

Thx!

Hi, did you try the first block of code that tuanphan posted?

Quote

/* Fix portfolio */
body.homepage article section:first-child {
    padding-top: 0 !important;
}

 

Link to comment
On 6/25/2021 at 3:02 AM, spage said:

I'm also having this issue any advice would be appreciated.  The custom CSS that @tuanphanhas linked isn't working for me.  Hoping Squarespace fixes this issue.

 

My website: reachsam.com

The work section is what's having the issues.

Thx!

Add to Design > Custom CSS

/* Portfolio */
body#collection-608c50a1e722b75e3724abd0 section:first-child {
	padding-top: 0 !important;
}

 

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

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
On 6/24/2021 at 7:09 PM, Murli_S said:

Thank you for taking your time to help! unfortunately didn't work. There's still an issue when hovering over the portfolio links. See attached gif:

portfolioissue.gif

Don't remove above code. Add this code

@media screen and (max-width:767px) {
.portfolio-hover-display {
    min-height: 100vh !important;
}
}

 

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

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
On 6/27/2021 at 6:08 PM, tuanphan said:

Add to Design > Custom CSS


/* Portfolio */
body#collection-608c50a1e722b75e3724abd0 section:first-child {
	padding-top: 0 !important;
}

 

Thank you so much!! This worked perfectly!

Link to comment
  • 2 weeks later...
5 hours ago, dmcfaul said:

I'm having the same issue and the code is not working for me.

My website https://www.daniellemcfaul.com/portfolio.

Your site, use this code

/* Portfolio */
body#collection-5e2cc0a98ae9853306d80234 section:first-child {
	padding-top: 0 !important;
}

 

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

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
On 7/14/2021 at 3:39 AM, rc16 said:

Wish I found this a bit earlier - I've had the same problem on the site for a month.

 

Unfortunately your code doesn't seem to work on my page tuanphan, does this one need a tweak somewhere? https://camuswyatt.works/works

Use this code

/* Portfolio */
body#collection-604c25dab1aad7403ed2d2e8 section:first-child {
	padding-top: 0 !important;
}

 

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

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

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.