Jump to content

Center align content of a block on mobile only

Recommended Posts

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

Screenshot 2021-12-05 at 14.21.49.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

image.png.1f47b5b241b0c47dd53b91b77bf3aca3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

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.