Jump to content

How do I layer this fixed position 40% transparent accent circle on my page?

Recommended Posts

Site URL: https://primrose-lime-62ht.squarespace.com

So I had made a cool 40% transparent circle on the side of this site for my client, and it was pretty much behaving perfect: it was layered underneath all the different sections of the homepage, so all text on the page was sharp above it.

I did something trying to change the section height and my pink circle now only shows up at the top and bottom of the page.

It shows up properly for me when in EDITING mode, but then when I hit Done/Save, it hides behind stuff again. Photos are how it is SUPPOSED to behave. You can see it continues over the end of the green section and into the beige.

1813165913_ScreenShot2021-02-26at3_25_38AM.thumb.png.4648fdd4c7d6f2bbe1399af19e137e43.png

To see the site, the pw is "help".

Here is my code block:

<div class="pinkdot">
</div>

<style>
.pinkdot {
    font-size: 5vw;
background: rgba(224, 199, 202,.4);
  margin-left:auto;
    margin-right:auto;
    width:960px;
  position: fixed;
  top:5.5em;
  bottom:4em;
  left:12em;
  height: 5em;
  width: 5em;
    border-radius: 50%;
padding: 600px;
text-align: right;
}
</style>

 

I'm a graphic designer, super rudimentary at CSS so please go easy on me. My units are all a mess from some trial and error, but they were like that when it DID work, so it wasn't causing a problem in functionality to the best of my knowledge.

Screen Shot 2021-02-26 at 3.25.52 AM.png

Link to comment
  • Replies 0
  • Views 122
  • Created
  • Last Reply

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.