How to target a specific button in an image card block

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

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?

Thanks for your really quick reply. 

I'm trying to edit the Image Card block in the hero section. 

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. 

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/

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

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

3. (Tablet – Services) Increase text width?

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

4. (Tablet – Homepage) Text break.

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

5. (Tablet – Footer) Increase text width?

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

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? 

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