Jump to content

Problem with floating sticky button hiding behind images on mobile

Recommended Posts

Posted

Looking for some help here. I have tried two different methods of adding a floating CTA sticky button on my website. First one involves adding a section, then adding a block and selecting </>code, which I edit to have the following:

<div id="customFloatingButton">

<a href="tel:293283928" target="\_blank">Call Now</a>

</div>

<style> #customFloatingButton { position: fixed; bottom: 20px; right: 20px; z-index: 2147483647; } #customFloatingButton a { display: inline-block; background-color: #2952a3; color: white; padding: 15px 30px; text-decoration: none; box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5); transition: 200ms; } #customFloatingButton a:hover { transform: scale(1.04); } </style>

However, the button hides behind images and while it scrolls on the page, you cannot see it all the time as you scroll on mobile.

The second method I followed this youtube video:

https://www.youtube.com/watch?v=2O0qC9RB9NM

using the code for the specific block:

block-yui_3_17_2_1_1728920387578_5629 {

position: fixed;

z-index: 2147483647;

bottom: 1%;

right: 1%;

height:75px;

width:200px;

}

Still the same result with respect to the button hiding behind some images on mobile.

Any suggestions welcome on fixing this. Thanks!

  • Replies 1
  • Views 417
  • 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.