Putting text over an image better than squarespace's default

Site URL: https://africanaeconomics.com/diverse-economies-for-youth

Hello

I have an image that requires text to be in a specific place, not just in the middle as the squarespace poster option allows. Simply editing the image to have text creates fuzzy lines that aren't great. I've attached a copy of what i'd like the text to look like. 

Thanks so much guys

Hi,

It's possible to adjust the position of the text using Custom CSS. However, I'd like to point out that having it break lines the way you want it too, may be a bit more tricky than expected. If you would like to word to be positioned to the top-right.

Best,

Dan

7 minutes ago, Wolfsilon said:

Hi,

It's possible to adjust the position of the text using Custom CSS. However, I'd like to point out that having it break lines the way you want it too, may be a bit more tricky than expected. If you would like to word to be positioned to the top-right.

Best,

Dan

I see. Well having the words over the microphone doesn't look great. Is there a way to put the text somewhere where the microphone isn't? Perhaps one word on each line and justified to the right?

Thanks so much

If memory serves me correct, since I can't find an image on your website using the "poster" style. It would be the following:

.design-layout-poster .image-title-wrapper {
    display: flex;
    align-items: flex-end;
	justify-content: flex-end;
  }

But again, it's hard to troubleshoot without having a sample in place on your website.

1 hour ago, Wolfsilon said:

If memory serves me correct, since I can't find an image on your website using the "poster" style. It would be the following:

.design-layout-poster .image-title-wrapper {
    display: flex;
    align-items: flex-end;
	justify-content: flex-end;
  }

But again, it's hard to troubleshoot without having a sample in place on your website.

I did put the reference URL at the top, but here it is again if you missed it

https://africanaeconomics.com/diverse-economies-for-youth

I am pretty bad at this. Here's the code i used, but if you click on the above link, only the font is working.

<style>
  #block-yui_3_17_2_1_1665680081272_6523
    p { 
  color: white;!important;
  font-family: Optima, sans-serif;!important;
}
    .design-layout-poster .image-title-wrapper {
    display: flex;
    align-items: flex-end;
	justify-content: flex-end;
  }</style>