7.1 portfolio - how to disable clickthrus on hover, and format for mobile?

Site URL: https://www.theproductiveco.com/portfolio-services

Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular.

Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. 

Can these be accomplished using Custom CSS?

2 hours ago, hayleysb13 said:

Site URL: https://www.theproductiveco.com/portfolio-services

Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular.

Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. 

Can these be accomplished using Custom CSS?

There is one Css style that removes the event fire from link. It is pointer-events, but with this style, the hover effect is also removed too. So I suggest using the javascript to prevent the defaul action of clicking on the link

<script>
  const portItems = document.querySelectorAll('section[data-section-id="62fe84a32655a00e2cddb8f1"] .grid-item');

  if(portItems.length) {
    portItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
      })
    })
  }
</script>

Hope it can help

On 8/22/2022 at 11:47 AM, bangank36 said:

There is one Css style that removes the event fire from link. It is pointer-events, but with this style, the hover effect is also removed too. So I suggest using the javascript to prevent the defaul action of clicking on the link

<script>
  const portItems = document.querySelectorAll('section[data-section-id="62fe84a32655a00e2cddb8f1"] .grid-item');

  if(portItems.length) {
    portItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
      })
    })
  }
</script>

Hope it can help

Hi! I inserted this code above on the page, but nothing seemed to change. Is there something I'm missing?

On 8/22/2022 at 8:41 PM, hayleysb13 said:

Site URL: https://www.theproductiveco.com/portfolio-services

Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular.

Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. 

Can these be accomplished using Custom CSS?

The url doesn't work. Can you check it again?

Also, you need to add above code to Home > Settings > Advanced > Code Injection > Footer, not Custom CSS

7 hours ago, tuanphan said:

The url doesn't work. Can you check it again?

Also, you need to add above code to Home > Settings > Advanced > Code Injection > Footer, not Custom CSS

Yes! See this URL: https://www.theproductiveco.com/strategy

I have inserted the following code (which I found from another thread) into the Page Header Code Injection for this page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('a.grid-item').removeAttr('href');
});
</script>

That worked to disable the clickthroughs, but now the hover is gone on mobile. How do I get the hover back in mobile view?

On 8/26/2022 at 11:34 PM, hayleysb13 said:

Yes! See this URL: https://www.theproductiveco.com/strategy

I have inserted the following code (which I found from another thread) into the Page Header Code Injection for this page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('a.grid-item').removeAttr('href');
});
</script>

That worked to disable the clickthroughs, but now the hover is gone on mobile. How do I get the hover back in mobile view?

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
a.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;
}
}