Left-aligned Text on specific Poster Images

Site URL: https://www.compagnievlast.com/spectacles/codebreakers

specific page URL: https://www.compagnievlast.com/spectacles/codebreakers

Hi everyone!

Screenshot attached: instead of the default centered-text on Poster Images, I'm looking to left-align only that text on that specific image (so I'm not looking for a CSS code that would apply to the entire website).

Also, and if possible, I'm looking into a 2nd snippet of code for that same Text on that same Poster Image that would top-align that text. Ideally, this text would look best if it was starting right under the top black margin so I'd be looking for a CSS code with a customizable padding in pixels for example, so I can adjust it by myself in the future.   

Any help would be greatly appreciated, thank you!

Copy this custom css and change the top value as you need

I used Find Squarespace Ids extension to get the id

#block-yui_3_17_2_1_1604320727529_4873 .image-title.sqs-dynamic-text {
  text-align: left;
}
#block-yui_3_17_2_1_1604320727529_4873.sqs-block-image .design-layout-poster .image-card-wrapper {
    align-items: flex-start;
    top: 10%;
}

It worked perfectly!  Thank you very much @bangank36!

Hey @bangank36, on that very same topic: how can I get the subtitle text on this other Poster Image centered-align?  (screenshot attached)

same website, different page URL: https://www.compagnievlast.com/spectacles/huis-clos
top poster image, #block-yui_3_17_2_1_1604248252976_6344

I've applied a general justify-text code (which I need for most of that website), but it is having an effect on subtitle texts in Poster Images that is not wanted: left-aligned instead of centered-aligned.  Title still looks fine and hasn't been affected. 

I'm trying to either a) keep the general justify-text code, and find another code to isolate which blocks should not be justified (aka #block-yui_3_17_2_1_1604248252976_6344 should not be justified), or b) replace the current general justify-text code with a smarter one that could filter out text paragraphs placed on images (aka Poster Images).

Would you be able to take a look at it and let me know what you think?
Thank you!

FYI here's the general justify-text code I've been using:
p {
  text-align: justify;
}

PS: I also tried customizing your snipped of code to bypass the general justify-text code but I it didn't work out so far...

#block-yui_3_17_2_1_1604248252976_6344.image-subtitle.sqs-dynamic-text {
  text-align: center;
}

I used this

#block-yui_3_17_2_1_1604248252976_6344 .image-subtitle.sqs-dynamic-text p {
    text-align: center;
}

That did the trick, thanks again! 😀

Hi @bangank36!  On that same Poster Image/Text Alignement topic, here's another thing I'd love to know how to do.

See pic attached (did it on Preview app but I'd like to get the custom css to do that on SquareSpace...)

Page URL: https://www.compagnievlast.com/spectacles/la-ligne-de-partage-des-eaux

On this specific Poster Image (#block-yui_3_17_2_1_1605724655611_3822), I'd like to:

• reduce the default right margin to push that 'title text' to the far right (ideally a snippet of code so I can customize the margin size by pixel)
• get that 'column' look so that the text doesn't go above the picture details
• finally, justify the whole text 

PS: I'm reposting here as your previous answers on that topic were so helpful, but lmk if you'd prefer me to open a new thread for this!  Thanks!

3 hours ago, gmajou said:

Hi @bangank36!  On that same Poster Image/Text Alignement topic, here's another thing I'd love to know how to do.

See pic attached (did it on Preview app but I'd like to get the custom css to do that on SquareSpace...)

Page URL: https://www.compagnievlast.com/spectacles/la-ligne-de-partage-des-eaux

On this specific Poster Image (#block-yui_3_17_2_1_1605724655611_3822), I'd like to:

• reduce the default right margin to push that 'title text' to the far right (ideally a snippet of code so I can customize the margin size by pixel)
• get that 'column' look so that the text doesn't go above the picture details
• finally, justify the whole text 

PS: I'm reposting here as your previous answers on that topic were so helpful, but lmk if you'd prefer me to open a new thread for this!  Thanks!

 

#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  width: 50%;
  left: auto;
}
#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .design-layout-poster .image-card {
    width: 80%;
    text-align: justify;
}
#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .design-layout-poster .image-card>* {
    text-align: justify !important;
}

Many thanks @bangank36, really helpful!  

On the same image, is there also a css code to reduce the line spacing of this text?  So it looks as close as possible to the screenshot attached.  That'd be great!

10 hours ago, gmajou said:

Many thanks @bangank36, really helpful!  

On the same image, is there also a css code to reduce the line spacing of this text?  So it looks as close as possible to the screenshot attached.  That'd be great!

#block-yui_3_17_2_1_1605724655611_3822.sqs-block-image .sqs-dynamic-text {
  line-height: 1em !important;
}