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

How to target a specific button in an image card block


jtother

Question

Site URL: https://moneymoves.com.au

Hi, I'm trying to target a pecific image card block to my site https://moneymoves.com.au

There are three things I'd like to be able to do. 

1. Center align the button only (Squarespace offers the option of changing the alignment of the text AND the button, but I want to keep the text left aligned and the button centred). 

2. Make the button the full width of the container. 

3. Add a little padding to the text/button in the image card. At full-size it's perfect, but at any other size, including mobile, the text is on the edge of the image card. 

I've successfully targeted other single elements before but finding this tricky. 

Let me know if you need any info from me. 

Thanks, 

James

Edited by jtother
Update
Link to comment

6 answers to this question

Recommended Posts

  • 0
2 hours ago, jtother said:

Site URL: https://moneymoves.com.au

Hi, I'm trying to target a pecific image card block to my site https://moneymoves.com.au

There are three things I'd like to be able to do. 

1. Center align the button only (Squarespace offers the option of changing the alignment of the text AND the button, but I want to keep the text left aligned and the button centred). 

2. Make the button the full width of the container. 

3. Add a little padding to the text/button in the image card. At full-size it's perfect, but at any other size, including mobile, the text is on the edge of the image card. 

I've successfully targeted other single elements before but finding this tricky. 

Let me know if you need any info from me. 

Thanks, 

James

Which image block you are editting?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
Posted (edited)

Update:

Q3. I figured out how to add padding to the text/button. Add the following code to Pages > Page Settings for the appropriate page you're editing > Then, add this to Advanced. You will need to use Inspect Element to find your block-yui code. 

<style>
#block-yui_3_17_2_1_1627259866438_6504 .image-card {
  padding-left: 10px;
    padding-right: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}
  </style>

For full control over the padding, make sure you double check the settings under Design > Site Styles > Image Blocks > Image Block: Cards for Image, Title and Button Separation. 

Edited by jtother
Clarification
Link to comment
  • 0
On 7/29/2021 at 8:20 AM, jtother said:

Site URL: https://moneymoves.com.au

Hi, I'm trying to target a pecific image card block to my site https://moneymoves.com.au

There are three things I'd like to be able to do. 

1. Center align the button only (Squarespace offers the option of changing the alignment of the text AND the button, but I want to keep the text left aligned and the button centred). 

2. Make the button the full width of the container. 

3. Add a little padding to the text/button in the image card. At full-size it's perfect, but at any other size, including mobile, the text is on the edge of the image card. 

I've successfully targeted other single elements before but finding this tricky. 

Let me know if you need any info from me. 

Thanks, 

James

Do you still need help?

Also need to fix these?

Site URL – https://www.moneymoves.com.au/

1. (All devices – Homepage) Change the background color of first block?

https://www.moneymoves.com.au/

moneymoves.com_.au-01-min.png

2. (Desktop/Tablet – Homepage) Make the buttons in the same line?

https://www.moneymoves.com.au/

moneymoves.com_.au-02-min.png

3. (Tablet – Services) Increase text width?

https://www.moneymoves.com.au/#services

moneymoves.com_.au-03-min.png

4. (Tablet – Homepage) Text break.

https://www.moneymoves.com.au/

moneymoves.com_.au-05-min.png

5. (Tablet – Footer) Increase text width?

https://www.moneymoves.com.au/

moneymoves.com_.au-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi @tuanphan thank you. 

Yes, I'm trying to make a few changes at the moment and need some help. I worked out answers to my initial questions, with either direct solutions (from reading your answers on this forum or others) or indirect solutions. 

Regarding your specific questions, 

1. I've figured out how to change the colour of the text block background. 

2. I've figured out how to align/set a minimum height for all the columns. 

3. Yes, my site isn't optimised for tablet yet. Is there any easy way to test so I can visually see the changes - I can easily see mobile and desktop via squarespace, but that's it. Secondly, is there specific code, like the mobile only code that targets min max width, that I would use to ensure optimisation for tablet? Like this? 

/* media query for tablet */
@media screen and (max-width:991px) and (min-width:768px) {
 YOUR CSS HERE
}

or 

@media screen and (min-width:991px) {
    .image-card .image-title::before {
        content: url();
        zoom:20%;
        visibility: visible;
        display: block;
    }
}
@media screen and (max-width:990px) {
    .image-card .image-title::before {
        content: url();
        zoom:10%;
        visibility: visible;
        display: block;
    }
}

4. Similar to above. 

5. I've used 640px as the max width for mobiles, is that best practice? 

Link to comment
  • 0
On 8/3/2021 at 12:04 PM, jtother said:

Hi @tuanphan thank you. 

Yes, I'm trying to make a few changes at the moment and need some help. I worked out answers to my initial questions, with either direct solutions (from reading your answers on this forum or others) or indirect solutions. 

Regarding your specific questions, 

1. I've figured out how to change the colour of the text block background. 

2. I've figured out how to align/set a minimum height for all the columns. 

3. Yes, my site isn't optimised for tablet yet. Is there any easy way to test so I can visually see the changes - I can easily see mobile and desktop via squarespace, but that's it. Secondly, is there specific code, like the mobile only code that targets min max width, that I would use to ensure optimisation for tablet? Like this? 

/* media query for tablet */
@media screen and (max-width:991px) and (min-width:768px) {
 YOUR CSS HERE
}

or 

@media screen and (min-width:991px) {
    .image-card .image-title::before {
        content: url();
        zoom:20%;
        visibility: visible;
        display: block;
    }
}
@media screen and (max-width:990px) {
    .image-card .image-title::before {
        content: url();
        zoom:10%;
        visibility: visible;
        display: block;
    }
}

4. Similar to above. 

5. I've used 640px as the max width for mobiles, is that best practice? 

To view your site in Tablet, follow this video

With Squarespace 7.0, you can use (max-width:640px) for mobile, With SS 7.1, use 767px

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...