K_B

It's the pulsing circles. When you hover your cursor over them, the tooltip expands

I added some CSS for a hover tooltip on my site that expands when you hover (or click, on mobile) the pulsing circles. It works well on desktop but on mobile, the tooltip opens but is under the other circles. How can I fix this? https://transformationinsights.io/hover-tooltip Here's my code: ///////Pulsing circle/////// .pulsating-circle { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 30px; height: 30px; &:before { content: ''; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; z-index: -1; margin-top: -100%; border-radius: 45px; background-color: #0071BC ; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } &:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; z-index: -1; background-color: white; border-radius: 15px; box-shadow: 0 0 8px rgba(0,0,0,.3); animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite; } } @keyframes pulse-ring { 0% { transform: scale(.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-dot { 0% { transform: scale(.8); } 50% { transform: scale(1); } 100% { transform: scale(.8); } } //Tooltip CSS// .pulsating-circle .rt-tooltip-box { min-width:200px; top:50%; left:100%; margin-left:20px; transform:translate(0, -50%); padding:10px 20px; color:#0C2B64; background-color:#99D6FF; font-weight:normal; font-size:13px; border-radius:8px; position:absolute; z-index:99999999; box-sizing:border-box; box-shadow:0 1px 8px #F0F3F5; visibility:hidden; opacity:0; transition:opacity 0.8s; } .pulsating-circle:hover .rt-tooltip-box { visibility:visible; opacity:1; } .pulsating-circle .rt-tooltip-box i { position:absolute; top:50%; right:100%; margin-top:-12px; width:12px; height:24px; overflow:hidden; } .pulsating-circle .rt-tooltip-box i::after { content:''; position:absolute; width:12px; height:12px; left:0; top:50%; transform:translate(50%,-50%) rotate(-45deg); background-color:#99D6FF; box-shadow:0 1px 8px #F0F3F5; } .pulsating-circle .lft-tooltip-box { min-width:200px; top:50%; right:100%; margin-right:20px; transform:translate(0, -50%); padding:10px 20px; color:#0C2B64; background-color:#99D6FF; font-weight:normal; font-size:13px; border-radius:8px; position:absolute; z-index:99999999; box-sizing:border-box; box-shadow:0 1px 8px #F0F3F5; visibility:hidden; opacity:0; transition:opacity 0.8s; } .pulsating-circle:hover .lft-tooltip-box { visibility:visible; opacity:1; } .pulsating-circle .lft-tooltip-box i { position:absolute; top:50%; left:100%; margin-top:-12px; width:12px; height:24px; overflow:hidden; } .pulsating-circle .lft-tooltip-box i::after { content:''; position:absolute; width:12px; height:12px; left:0; top:50%; transform:translate(-50%,-50%) rotate(-45deg); background-color:#99D6FF; box-shadow:0 1px 8px #E0E0E0; } .pulsating-circle .btm-tooltip-box { min-width:200px; top:40px; left:50%; transform:translate(-50%, 0); padding:10px 20px; color:#0C2B64; background-color:#99D6FF; font-weight:normal; font-size:13px; border-radius:8px; position:absolute; box-sizing:border-box; box-shadow:0 1px 8px #F0F3F5; visibility:hidden; opacity:0; transition:opacity 0.8s; z-index: 9999999; } .pulsating-circle:hover .btm-tooltip-box { visibility:visible; opacity:1; } .pulsating-circle .btm-tooltip-box i { position:absolute; bottom:100%; left:50%; margin-left:-12px; width:24px; height:12px; overflow:hidden; } .pulsating-circle .btm-tooltip-box i::after { content:''; position:absolute; width:12px; height:12px; left:50%; transform:translate(-50%,50%) rotate(45deg); background-color:#99D6FF; box-shadow:0 1px 8px #F0F3F5; } /////////////////////////////////

simpelandassociates.com

On the Squarespace preview my site looks fine, but on the live site, my image changes size and the code blocks have extra space below them. I'm can't figure out why? I'm using this code for each of the 3 code blocks: Code block 1 <h4 class="sqsrte-text-color--accent" style="font-size:22px; text-align: center;"> <strong>Plug In</strong> </h4> Code block 2 <h4 class="sqsrte-text-color--accent" style="text-decoration: underline; font-size:18px; text-align: center;"> <a href="../../insights"> Thought Leadership </a> </h4> Code block 3 <h4 class="sqsrte-text-color--accent" style="text-decoration: underline; font-size:18px; text-align: center;"> <a href="../../connect"> Contact Us </a> </h4> SqSpc Editor: Live site: