KCAllgood Posted November 29, 2022 Share Posted November 29, 2022 I used CSS to make a couple of angled sections but for some reason on the live site it won't pickup the angle on the header section.. I am using it twice in order to do different sections on the page. Could that be causing issues? #COLLECTIONID { #page .page-section:nth-of-type(1) { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 100% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%); } } the header is a video.. could that be the problem? Link to comment
Beyondspace Posted November 30, 2022 Share Posted November 30, 2022 17 hours ago, KCAllgood said: I used CSS to make a couple of angled sections but for some reason on the live site it won't pickup the angle on the header section.. I am using it twice in order to do different sections on the page. Could that be causing issues? #COLLECTIONID { #page .page-section:nth-of-type(1) { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 100% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%); } } the header is a video.. could that be the problem? Can you share your site so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
egrimm Posted December 7, 2022 Share Posted December 7, 2022 @Beyondspace I am having the same issue! My site is: https://rrs.squarespace.com You can see the blue video overlay has the clipping path applied, but not the video itself. This is the code I am using: section[data-section-id="6120187c92e3823b1c2462bd"]{ clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%, 0% 0%) !important; } Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/8/2022 at 4:40 AM, egrimm said: I am having the same issue! My site is: https://rrs.squarespace.com You can see the blue video overlay has the clipping path applied, but not the video itself. This is the code I am using: section[data-section-id="6120187c92e3823b1c2462bd"]{ clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%, 0% 0%) !important; } Change to this section[data-section-id="6120187c92e3823b1c2462bd"], section[data-section-id="6120187c92e3823b1c2462bd"] .section-border { clip-path: polygon(100% 0,100% 50%,50% 100%,0 50%,0% 0%) !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment