2 Replies - 88 Views - Last Post: 02 November 2017 - 06:06 AM

#1 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 421
  • Joined: 30-April 15

Button not clickable

Posted 01 November 2017 - 06:27 PM

I am editing a section of a Shopify theme and am running into an issue. I am attempting to add a custom button (link that looks like a button). My placement is correct, but for some reason, I cannot click on the button. It is like there is a mask in front of it, but I cannot figure out what.

The code is the following:

{% if section.blocks.size > 0 %}
  <div id="QuotesSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="quotes-section">
    <div class="quotes-slider text-center" data-count="{{ section.blocks.size }}" data-speed="{{ section.settings.autoplay_speed }}">
      {% for block in section.blocks %}
        <div class="quotes-slide quotes-slide--{{ forloop.index0 }} quotes-slide--{{ block.id }}{% if forloop.first == true %} quotes-slide--visible{% endif %}" {{ block.shopify_attributes }}>
          {% if block.settings.quote != blank %}
            <div class="h4 quote rte-setting">{{ block.settings.quote }}</div>
          {% endif %}
          {% if block.settings.author != blank %}
            <span class="quote-author">{{ block.settings.author | escape }}</span>
          {% endif %}
          <div><a href="/pages/programs" class="btn hero__btn">Enroll Now</a></div>
        </div>
      {% endfor %}
    </div>
  </div>
{% else %}
  {% include 'no-blocks' %}
{% endif %}


The button is this:

<div><a href="/pages/programs" class="btn hero__btn">Enroll Now</a></div>


Whenever, I change the placement in the code, for instance outside of the for loop the button falls outside of the section or if I place it outside of the parent div, I can click on the button, but then the button is placed 30px from the top of the section (main section div).

Does anyone see what I am doing wrong? Below is a link to the live site. The fore-mentioned section is the 2nd section with "New Lacrosse Specialization Programs Available".

https://440performance.com/

Any help would be appreciated.

This post has been edited by pfar54: 01 November 2017 - 06:27 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Button not clickable

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: Button not clickable

Posted 02 November 2017 - 12:24 AM

Use your browser's developer tools to discover what is sitting above the button. Right click and Inspect Element (in most browsers). Then just moving your mouse around will give a visual indication of an issue.

From this developer environment you can also check and adjust the CSS and HTML.
Was This Post Helpful? 0
  • +
  • -

#3 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 421
  • Joined: 30-April 15

Re: Button not clickable

Posted 02 November 2017 - 06:06 AM

I have pulled up the developer tools and viewed the code, that is how I gathered a mask of sometime is there. I cannot identify what is causing the issue though and how to bring the content over the parent element.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1