Center align content of a block on mobile only

Site URL: https://pentagon-snail.squarespace.com/work-with-me

I'd like to centre align the text and button here, for mobile only – I've worked out that the block-id is block-19e83a1f88fdd3e23066 but struggling to find the right custom css to fix the alignment issue.

Site password: kerri2021

1 hour ago, hannahpellatt said:

Site URL: https://pentagon-snail.squarespace.com/work-with-me

I'd like to centre align the text and button here, for mobile only – I've worked out that the block-id is block-19e83a1f88fdd3e23066 but struggling to find the right custom css to fix the alignment issue.

Site password: kerri2021

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	section[data-section-id="619a48341cc421520fbf7767"] {
		.image-card-wrapper {
			.image-title {
				text-align: center;
			}
		}
		.image-button-inner {
			text-align: center;
		}
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Amazing! Worked perfectly except that I'd like the text to be center aligned too... do I access that in the code with image-text ?

20 minutes ago, hannahpellatt said:

Amazing! Worked perfectly except that I'd like the text to be center aligned too... do I access that in the code with image-text ?

Do you mean setting justify for the text below title?

6 hours ago, bangank36 said:

Do you mean setting justify for the text below title?

Yes that's the one!

4 minutes ago, hannahpellatt said:

Yes that's the one!

4 minutes ago, hannahpellatt said:

Yes that's the one!

You can try

.image-card .image-subtitle-wrapper p {
  text-align: justify;
}

Let me know how it works on your site