Jump to content

CSS gradient disables editing?

Recommended Posts

Hello!

Has anyone encountered problems with CSS gradients with percentage values disabling the Squarespace page edit buttons? As soon as I add percentage values I can no longer edit the pages – the edit buttons won't show up. Double-clicking the content (which usually enables the editing) won't work either.

 

To replicate the problem, try this in the Custom CSS...

.Footer {
background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%);
}

Going back to Pages and reloading the site will stop the edit buttons from appearing.

 

Removing the percentage values like below will solve the issue...

.Footer {
background-image: linear-gradient(135deg, #ece54c, #46bdcf);
}

 

Adding a linear gradient with percentage values to text doesn't seem to cause a problem.

p { 
  border: none !important;
  background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%);
}

 

 Does anyone have an explanation for this? Is this a bug or did I miss something?

Thanks!

Link to comment
  • Replies 5
  • Views 690
  • Created
  • Last Reply
On 6/9/2020 at 2:00 PM, tuanphan said:

Can you share link to your site? We can check easier.

I have since made changes to the site so I doubt it will help you, but sure!
It's this one (password: herz). Using the Rally template (Brine family).

I just successfully replicated the bug – create a new site using the Rally template and paste this into the Custom CSS...

/** Footer **/
.Footer {
  background: linear-gradient(-45deg, #ece54c 0%, #46bdcf 75%);
}

Save and refresh the page. The edit buttons should no longer show up. They will show up when you remove the percentage values from the code.

 

------

 

Another thing I'm currently trying to figure out on the beherzt Website (password: herz) is how to use a :hover on a parallax item. See I'm using a clip-path to change the appearance of pages with banners on the site...

.Parallax-host-outer .Parallax-host .Parallax-item:not(:first-child) {
    clip-path: polygon(
    0 6vw,
    100% 0,
    100% calc(~"100% - 6vw"), 
    0 100%
  );
  -webkit-clip-path: polygon(
    0 6vw,
    100% 0,
    100% calc(~"100% - 6vw"), 
    0 100%
  );
}

Can I somehow use a :hover effect on this? I want to change the clip-path so that it reverts back to a rectangle. It works nicely on pages that have no banner image and the Footer but I can't make it work with pages with banners.
 

Thanks for your help tuanphan!

Link to comment
  • 1 month later...

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.