Jump to content

Button Link Expanding to entire page

Recommended Posts

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.

Link to comment
  • 2 weeks later...
  • Replies 5
  • Views 481
  • Created
  • Last Reply
  • 3 weeks later...

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>

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

aldapdobbs.com-tablet-homepage-min.png

2. (Mobile-Homepage) White space

aldapdobbs.com-mobile-homepage-min.png

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

aldapdobbs.com-mobile-about-min.png

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

aldapdobbs.com-tablet-about-min.png

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

aldapdobbs.com-tablet-event-detail-min.p

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

aldapdobbs.com-tablet-event-detail-02-mi

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

aldapdobbs.com-tablet-media-min.png

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

aldapdobbs.com-mobile-media-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.