Jump to content

How can I get my section divider images to resize on mobile?

Recommended Posts

[data-section-id="63079e6224b41c102dbb8dae"] {
  overflow: invisible;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(https://static1.squarespace.com/static/63079612ad280b6848defeb6/t/633496cf651ab509526dd93a/1664390863356/PinkWavesWithWhitedottedLine.png);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    top: 0;
    margin-top: 1px;
    transform: translateY(-100%);
    pointer-events: none!important;
    z-index: 1;
    @media screen and (max-width: 700px) {
      background-size: 100% 100%;
    }
  }
}

I have a cool PNG divider that divides the hero image from the rest of the page. But on mobile, it stretches up vertically. How can I rewrite my code so that my divider adjusts it's height proportionally to its new width??

Screen Shot 2022-10-18 at 10.29.18 AM.png

Screen Shot 2022-10-18 at 10.29.13 AM.png

Link to comment
  • Replies 1
  • Views 198
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.