Jump to content

Right justification on top of image

Recommended Posts

Hello,

I'm attempting to put a small amount of text over an image, but would like it to be justified on the right hand side, so that the focal point of the image can be seem.

I have tried two different ways and they're both just not quite right. 

The below image show

1. How i'd like it to look

2. How both attempts look

EDIT: I'VE HAD TO COPY THE PAGE AND MAKE THE ORIGINAL PRESENTABLE, BUT I WOULD STILL LOVE LOVE SOME HELP.

GO HERE:  https://africanaeconomics.com/diverse-economies-for-youth-copy

Code attempt #1

<style>
  
#block-yui_3_17_2_1_1665680081272_6523

h1 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
h2 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
h3 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
</style>

Code attempt 2

<style>
  /*icon text colour*/
  #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: top-right;
	justify-content: flex-end;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

  </style>

The URL again is

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

EDIT: 

EDIT: I'VE HAD TO COPY THE PAGE AND MAKE THE ORIGINAL PRESENTABLE, BUT I WOULD STILL LOVE LOVE SOME HELP.

GO HERE:  https://africanaeconomics.com/diverse-economies-for-youth-copy

Thank you so much!

220_F_198015012_DK0TZT13PEBV5AvDYbZZ7nAsSu26Q34U.jpeg

Screen Shot 2022-10-17 at 12.54.15 PM.png

Edited by JTeich
update link
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 10/22/2022 at 10:05 PM, JTeich said:

Hello! It should look like the first image above, thanks so much!

Screen Shot 2022-10-22 at 11.04.44 AM.png

You mean change image 2, 3 to make same as image 1?

image.thumb.png.b0c3f23cb53b4da45673d2a83b35baed.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
19 minutes ago, tuanphan said:

You mean change image 2, 3 to make same as image 1?

image.thumb.png.b0c3f23cb53b4da45673d2a83b35baed.png

Yes. So image 1 is just an image that's been edited to have text on it. The whole thing is one image. The problem with having it all be an image like that is the text is all fuzzy. So if I can have the image be without text, and then have actual text on top if it, it would make the whole thing look better. So images 2 and 3 are both attempts at making text on top of the image, but it's not quite right. I want the text to be placed the way it is in image 1. 

 

Thanks

Edited by JTeich
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.