How do I disable a 'click-through' on a hover picture?

Site URL: https://dogfish-clarinet-npzm.squarespace.com

I have a 2nd image hover on my home page on some images, but when you click on it it's taking people to a page with the image on - I don't want there to be a click option how do I get rid of this please?!

password for site is - empulse2020

22 minutes ago, Tinxy7 said:

Site URL: https://dogfish-clarinet-npzm.squarespace.com

I have a 2nd image hover on my home page on some images, but when you click on it it's taking people to a page with the image on - I don't want there to be a click option how do I get rid of this please?!

 

password for site is - empulse2020

Add this in code injection header for disable click

<script>
	jQuery(document).ready(function($) {
    	$('section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 a').click(function(e) {
            e.preventDefault();
            //do other stuff when a click happens
        });
    });
</script>

Also add this css to make sure the round button display well on mobile

@media screen and (max-width: 767px) {
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.33% !important;
    float: left !important;
  }
}

Awe

On 12/17/2020 at 10:13 AM, bangank36 said:

Add this in code injection header for disable click

<script>
	jQuery(document).ready(function($) {
    	$('section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 a').click(function(e) {
            e.preventDefault();
            //do other stuff when a click happens
        });
    });
</script>

Also add this css to make sure the round button display well on mobile

@media screen and (max-width: 767px) {
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.33% !important;
    float: left !important;
  }
}

Awesome thank you SOOOOOO much!!  🙂

On 12/17/2020 at 10:13 AM, bangank36 said:

Add this in code injection header for disable click

<script>
	jQuery(document).ready(function($) {
    	$('section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 a').click(function(e) {
            e.preventDefault();
            //do other stuff when a click happens
        });
    });
</script>

Also add this css to make sure the round button display well on mobile

@media screen and (max-width: 767px) {
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.33% !important;
    float: left !important;
  }
}

This actually looks a bit odd on mobile, is there a way of making them larger or so they are in a line somehow please??  Sorry!!

1 hour ago, Tinxy7 said:

This actually looks a bit odd on mobile, is there a way of making them larger or so they are in a line somehow please??  Sorry!!

Add the css code i provided above to design custom css

54 minutes ago, bangank36 said:

Add the css code i provided above to design custom css

Yes I did do that, but they come up quite small and in a line to the side on mobile and look a bit odd?  Lol!

10 hours ago, Tinxy7 said:

Yes I did do that, but they come up quite small and in a line to the side on mobile and look a bit odd?  Lol!

@media screen and (max-width: 767px) {
  section[data-section-id="5fdc89f5adf98e633069baa7"] .span-2 {
    width: 33.33% !important;
    float: left !important;
  }
}

WOOHOOOO perfect, they look excellent - thank you SOOOO much!!!!!!  🙂 

@Tinxy7 I see on this page on tablet, content is a bit narrow. You can add this CSS to increase width.

https://dogfish-clarinet-npzm.squarespace.com/communications-channels

/* Communications channels */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5fbfdcdfa97599144efcce7a .span-9 {
    width: 90%;
}
div#page-section-5fbfdcdfa97599144efcce7a .span-6 {
    width: 100%;
}
}

Also some pages on your site have very long content. You should consider adding a back to top button (You can use this free code to add one).

On FAQs page, you can change all to Accordion. That means when you click on a question, the content will appear below. You click on the next question, the above content will pile up and new content will open. You can use this free code or Accordion Plugin.