Jump to content

Error message using calc function (px - vw) to set responsive section height

Recommended Posts

Site URL: https://cyan-teal-3zmw.squarespace.com/case-study-equality-indicators

I'm working on a page with overlapping sections – one is inset with text, and one is full-width behind it as a background color – and I'm trying to get the background section height to expand as the text section on top of it expands. (Screengrab attached.) To achieve this, I'm using the calc function to make the height increase as the screen width decreases. Here's an example:

[data-section-id="6027ff54b347b32cf0c31df8"] {
  @media screen
  and (min-width: 1125px)
  and (max-width: 1400px) {
    min-height: calc(900px - 20vw)!important;
  }
}

This works for me when I test it in Inspector, but once it's live, I get this error message from Squarespace when inspecting the live CSS, which states that px + vw are incompatible units:

/* WARNING raised evaluating next rule: ExecuteError INCOMPATIBLE_UNITS: No conversion is possible from PX (pixels) to VW (viewport's width).. stripping unit. */

As a result of this, my calc function is being stripped and made static. I've seen plenty of instances of these units being combined though, so I know it's possible. Am I doing something wrong? Anyone have a workaround?

(Site password: governance)

overlapping-sections-height.jpg

Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply
On 3/23/2021 at 11:19 PM, dvgdvgdvg said:

Site URL: https://cyan-teal-3zmw.squarespace.com/case-study-equality-indicators

I'm working on a page with overlapping sections – one is inset with text, and one is full-width behind it as a background color – and I'm trying to get the background section height to expand as the text section on top of it expands. (Screengrab attached.) To achieve this, I'm using the calc function to make the height increase as the screen width decreases. Here's an example:


[data-section-id="6027ff54b347b32cf0c31df8"] {
  @media screen
  and (min-width: 1125px)
  and (max-width: 1400px) {
    min-height: calc(900px - 20vw)!important;
  }
}

This works for me when I test it in Inspector, but once it's live, I get this error message from Squarespace when inspecting the live CSS, which states that px + vw are incompatible units:


/* WARNING raised evaluating next rule: ExecuteError INCOMPATIBLE_UNITS: No conversion is possible from PX (pixels) to VW (viewport's width).. stripping unit. */

As a result of this, my calc function is being stripped and made static. I've seen plenty of instances of these units being combined though, so I know it's possible. Am I doing something wrong? Anyone have a workaround?

(Site password: governance)

overlapping-sections-height.jpg

Custom css use less so you can try this syntax

width: ~"calc(900px - 20vw)" !important;

more info: CSS3 calc() in LESS CSS (Example) (coderwall.com)

image.png.d225c403506a1d5e2d53b3e5209795ad.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

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.