Jump to content

Full width element not working on portfolio page

Recommended Posts

I'm trying to get the paper tear element to go the full length of the screen, which I've achieved on the homepage but can't on the portfolio page. Can't figure out why as the code is the same using different section IDs.

The code I'm using is below.

Quote

/* Our Work - section break top */
#siteWrapper section[data-section-id="6512ccbd81ea0f6cab1f4024"] {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100vw;
    height: 10%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/635212faaeb13620d67f4b29/t/65114e41b40bae09dd540b03/1695632961948/Wildlings_PaperTear_Up.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/635212faaeb13620d67f4b29/t/65114e41b40bae09dd540b03/1695632961948/Wildlings_PaperTear_Up.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}
 

www.wildlingscreative.com.au/work-cs

Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.