Button Link Expanding to entire page

Site URL: https://www.aldapdobbs.com/barefoot-dreams-of-petra-luna

Hello, I created a "BUY NOW" Button that opens in a shadowbox where an image provides three choices of where to buy from. The button works great, but my issue is that somehow it is causing one of the link choices to "migrate" to all of the elements below the button. Below the button there are several Text boxes and they are now all hyperlinked to the "Barnes and Noble" page that the button links to. I have tried moving these to new page sections, but I can't get the link off of the text boxes. Any help would be appreciated.

Hi. Which code did you add to make Buy Now button? Can you post here. I think the code is invalid structure make the problem.

Thanks for the response and sorry for the delay. Below is what what I put in the markup for the BUY NOW button.

<div style="text-align:center; padding:0;">

<a href="#/" data-featherlight="#Buy-Now" class="sqs-block-button-element--large sqs-block-button-element" style="background-color:#2d0657; color:#DFF006; padding:15px 15px;">BUY NOW</a>

</div>

<div style="display:none;">

<div id="Buy-Now" style="text-align:center;">

<a href="https://www.amazon.com/Barefoot-Dreams-Petra-Luna-Dobbs/dp/1728234654/ref=sr_1_1?dchild=1&keywords=alda%20dobbs&qid=1610924434&sr=8-1" alt="Amazon" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a62bbd9c8047856a56db/1611114027357/Amazon.jpg" alt="Amazon" /><a href="https://www.indiebound.org/book/9781728234656" alt="Indie Bound" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a63654406f6c97d60e85/1611114038530/Indie.jpg" alt="Indie Bound" />

<a href="https://www.barnesandnoble.com/w/barefoot-dreams-of-petra-luna-alda-dobbs/1138076393?ean=9781728234656" alt="Barnes & Noble" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a6317801e54fa0c4f647/1611114033602/B%26N.jpg" alt="Barnes&Noble" />

</div>

</div>

On 4/9/2021 at 12:24 AM, MTD said:

Thanks for the response and sorry for the delay. Below is what what I put in the markup for the BUY NOW button.

<div style="text-align:center; padding:0;">

<a href="#/" data-featherlight="#Buy-Now" class="sqs-block-button-element--large sqs-block-button-element" style="background-color:#2d0657; color:#DFF006; padding:15px 15px;">BUY NOW</a>

</div>

 

<div style="display:none;">

<div id="Buy-Now" style="text-align:center;">

<a href="https://www.amazon.com/Barefoot-Dreams-Petra-Luna-Dobbs/dp/1728234654/ref=sr_1_1?dchild=1&keywords=alda%20dobbs&qid=1610924434&sr=8-1" alt="Amazon" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a62bbd9c8047856a56db/1611114027357/Amazon.jpg" alt="Amazon" /><a href="https://www.indiebound.org/book/9781728234656" alt="Indie Bound" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a63654406f6c97d60e85/1611114038530/Indie.jpg" alt="Indie Bound" />

<a href="https://www.barnesandnoble.com/w/barefoot-dreams-of-petra-luna-alda-dobbs/1138076393?ean=9781728234656" alt="Barnes & Noble" />

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a6317801e54fa0c4f647/1611114033602/B%26N.jpg" alt="Barnes&Noble" />

</div>

</div>

Your code missing some closing </a> tag. Try using this new code

<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#Buy-Now" class="sqs-block-button-element--large sqs-block-button-element" style="background-color:#2d0657; color:#DFF006; padding:15px 15px;">BUY NOW</a>
</div>
<div style="display:none;">
<div id="Buy-Now" style="text-align:center;">
<a href="https://www.amazon.com/Barefoot-Dreams-Petra-Luna-Dobbs/dp/1728234654/ref=sr_1_1?dchild=1&keywords=alda%20dobbs&qid=1610924434&sr=8-1" alt="Amazon">
<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a62bbd9c8047856a56db/1611114027357/Amazon.jpg" alt="Amazon" /></a>
  <a href="https://www.indiebound.org/book/9781728234656" alt="Indie Bound">
<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a63654406f6c97d60e85/1611114038530/Indie.jpg" alt="Indie Bound" />
  </a>
<a href="https://www.barnesandnoble.com/w/barefoot-dreams-of-petra-luna-alda-dobbs/1138076393?ean=9781728234656" alt="Barnes & Noble">
<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6007a6317801e54fa0c4f647/1611114033602/B%26N.jpg" alt="Barnes&Noble" />
  </a>
</div>

</div>

That did it!! Thanks very much for the help!

On 4/12/2021 at 10:41 PM, MTD said:

That did it!! Thanks very much for the help!

I see your site has some small problems. If you need to fix any, just reply here.

Site URL: https://www.aldapdobbs.com/

1. (Tablet-Homepage) Remove white spacing?

2. (Mobile-Homepage) White space

3. (Mobile-About) Align left or right 2 buttons?

4. (Tablet-About) Change button 2 text to 1 line?

5. (Tablet-Event details) White bar on right of screen

6. (Tablet-Event Details) Want to change button width?

7. (Tablet-Media) Increase with these columns?

8. (Mobile-Media) Images look huge. Want to change to 2 images/row?