Jump to content

CSS distorting Square Space interface and functionality

Go to solution Solved by Ziggy,

Recommended Posts

I'm working on creating an image map that can be interacted with that has pop up information when someone hovers over a specific portion of the map. I need to allow the map to be responsive to screen size else all my plot points are distorted. I have the code working perfectly fine in my code editors but when importing it into Square Space, I've found that the CSS distorts everything for some reason.

Multiple issues include removing the "ADD BLOCK" button, the image clipping into other panels as everything is shifted lower than it should be- also causing an issue where my hover pop ups show up in a different location then they should. I tried making some changes to the CSS and came across new issues- being unable to scroll. I've tried to do everything I can think of to fix my code but can't seem to fix one thing without Square Space freaking out on me. What I can say for certain is that display: flex; is a necessary part of my code but ruins everything. The problem is that even removing it, there's still issues with the "ADD BLOCK" button either crashing or the icons being obnoxiously large. I want to know why this can work in other instances but the instant I migrate to Square Space it freaks out. Thanks. Here is my CSS below:
 

<style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #scroll-container {
      overflow: auto;
      width: 100%;
      height: 100%;
    }

    #svg-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      height: auto;
    }

    circle {
      fill: transparent;
      stroke: red;
      stroke-width: 2;
      cursor: pointer;
    }

    .tooltip {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
      border-radius: 5px;
      display: none;
    }
  </style>

Screenshot 2024-03-11 105808.png

Screenshot 2024-03-11 110027.png

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

The styling you are adding is targeting general classes, (e.g. body, svg, circle, svg,  #svg-container) these get used by the underlying website and dashboard and are cause it to display unpredictably. It's advisable to use unique classes and IDs when adding custom code/styling so that these styles only affect your code.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.