Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Shelly

Add button to Gallery Image

Question

I want to add a button below text to a gallery image (like the attached screenshot). The website I'm working on is https://www.thejupegroup.com (password is: RJupe10). I want to add a button to subscribe under the text in the "Connect with Us" block.

Right now I have that block and the image to the left of it set up as side-by-side gallery images. I'm using the Blend template in the Brine family. 

Any CSS tips would be greatly appreciated! Thanks!!

Screen Shot 2019-12-01 at 11.45.01 AM.png

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 1
9 minutes ago, studiolinear said:

Just added! 

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child {
    background: #fff;
    color: #000;
    display: block;
    max-width: 200px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
}

 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


Link to post
  • 0

@tuanphanthanks for getting back to me so quickly. Ideally I'd like the button to link to a pop-up menu to subscribe. Is that possible, and if so should I start by creating that text link?

Share this post


Link to post
  • 0
9 minutes ago, Shelly said:

@tuanphanthanks for getting back to me so quickly. Ideally I'd like the button to link to a pop-up menu to subscribe. Is that possible, and if so should I start by creating that text link?

To create a button, you need to insert a link, under text, then use code to change it to button

To create popup, you need to use some javascript/jquery. It will complicated. 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


Link to post
  • 0

OK thank you. I think I will opt to just link the button to another page on the site to avoid the javascript. 

I've created the text link and it's live on the page now. Thanks again!

Share this post


Link to post
  • 0
2 hours ago, Shelly said:

OK thank you. I think I will opt to just link the button to another page on the site to avoid the javascript. 

I've created the text link and it's live on the page now. Thanks again!

add to Home > Design > Custom CSS

section#newsletter .Index-gallery-item-content-body a {
    background: #f1f2;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
}

 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


Link to post
  • 0

Hi guys! We are looking to do something similar to this on our site: https://trombone-paddlefish-tj7b.squarespace.com/ Pw: cinderwood

We are simply trying to add a button to the gallery slider here in Bring. We did try the code above and changed the section from newsletter to the ID for that section with no luck 😞 I attached a mockup of what we are looking to achieve! 

Screen Shot 2019-12-02 at 10.09.10 AM.jpg

Share this post


Link to post
  • 0
Just now, tuanphan said:

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: red;

Thank you so much, this is great! Do you know how we would make the button white with black text and add some padding to the button? 

Share this post


Link to post
  • 0
1 minute ago, tuanphan said:

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child { background: #fff; color: #000; display: block; max-width: 200px; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 10px; }

Nailed it! Thank you SO much!!

Share this post


Link to post
  • 0
15 hours ago, tuanphan said:

add to Home > Design > Custom CSS


section#newsletter .Index-gallery-item-content-body a {
    background: #f1f2;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
}

 

This didn't work for me. Right now I have that text linking to the RESOURCES page. I tried changing "#newsletter to #resources but no luck either. Any other ideas? Thanks in advance!

Share this post


Link to post
  • 0
On 12/2/2019 at 1:44 PM, tuanphan said:

@Shelly Where did you insert? It worked here


section#newsletter .Index-gallery-item-content-body a {
    background: #f1f2;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
}

image.thumb.png.985718507ff8476eab2dad3f886d6594.png

Ahh @tuanphan it's working now, thank you!!!!!

 

Share this post


Link to post
  • 0

@Tuanphan The button is working very well--thank you again! However this block of copy and button are getting cut off on mobile view. Any idea why that is happening?

 

Share this post


Link to post
  • 0
1 hour ago, Shelly said:

@Tuanphan The button is working very well--thank you again! However this block of copy and button are getting cut off on mobile view. Any idea why that is happening?

 

I don't know the cause. But you can add this code to handle

@media screen and (max-width:640px) {
section#newsletter .Index-gallery-inner .Index-gallery-item:last-child {
    min-height: 35vh;
}
section#newsletter figure img {height: 100% !important;}
}

 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


Link to post
  • 0
On 12/8/2019 at 4:08 PM, tuanphan said:

I don't know the cause. But you can add this code to handle


@media screen and (max-width:640px) {
section#newsletter .Index-gallery-inner .Index-gallery-item:last-child {
    min-height: 35vh;
}
section#newsletter figure img {height: 100% !important;}
}

 

This worked perfectly @tuanphan, thank you yet again!!!!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...