Jump to content

Align text on Image Poster Block and background color on textblock

Recommended Posts

Site URL: https://sheep-kumquat-absr.squarespace.com/config/design/custom-css

I'm trying to justify the text on my Image Poser block, and would like it to align in in the left top corner. Can't find the right code. See what I am aiming for in the attached screenshot.

I'm also wondering if it's possible to add a background color to a text block, image caption? See same screenshot from sketch. 



Link to comment
  • Replies 3
  • Views 482
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

sure, add the following to your css code. this will do it for all image cards though, so if you want it to only happen on one page, add in the squarespace block it, or just put it inside a code block on that page (wrapped in style tags).

figcaption.image-card-wrapper {
  justify-content:flex-start !important;
  align-items:flex-start !important;

figcaption .image-card {

figcaption.image-card-wrapper  .image-title {
  text-align:left !important;

figcaption.image-card-wrapper .image-title p, 
figcaption.image-card-wrapper .image-subtitle p {
  background-color: rgba(0,0,0,0.3) !important;
  padding:3px 8px;

figcaption.image-card-wrapper .image-subtitle {
  margin-top:0 !important;
  text-align:left !important;

here's the layout sqs uses in the code, so that should show you which classes are doing which bit


ends up looking like this


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Hi again! And thank you very much 🙏🙏

I manage to get the text on the image in the left top, and It also looks nice with the background color on it. But I didn't understand how to get the background color on the text below the image. It's an textblock since I can't fint how to get a image-caption under a image poster.




Edited by PatrikF
Link to comment

oh right. I misunderstood. you could put in a code block and then wrap your text in a span and style it with the same rules I applied to the header.

<p style="  background-color: rgba(0,0,0,0.3) !important;
  padding:3px 8px; color:white;">
  Here is some text
  • rgba(a,b,c,d) is a way of specifying colour and opacity, the first three numbers go up to 255 and the last one is from 0.0 to 1.0. 1.0 is a block of colour, 0.0 is totally transparent
  • if you wanted to do this lots of times, then add the styling to your custom css as a class and use that in your code block

in your custom css:

.myFancyClassName {
background-color: rgba(0,0,0,0.3) !important;
padding:3px 8px; 

in your code block

<p class="myFancyClassName">some text here</p>


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.