Lining a button up alongside text

Can anyone tell me how to get this button beside the word "you". I have tried Flexbox and margin. I have tried putting the button in its own div. I have tried placing the button in the same div, but it hangs lower than the word "you" and even with margin it will not move.

https://github.com/FantasticalEmbrace/docuseal-mobile-notary/tree/main

GitHub

GitHub - FantasticalEmbrace/docuseal-mobile-notary

Contribute to FantasticalEmbrace/docuseal-mobile-notary development by creating an account on GitHub.

MarkBoots•12/2/24, 7:32 PM

The text of button by default lines up to the base line of the h1.
You can change the alignment with

DonaldOP•12/2/24, 8:46 PM

Awesome thanks! Now I have the problem with I want it centered within the white space bedside it. When I try margin right the word now goes to the next line.

DDonald Awesome thanks! Now I have the problem with I want it centered within the white ...

croganm•12/2/24, 10:12 PM

I truthfully don't think there's a way to do exactly what you're asking without maybe some complicated javascript, and that's a maybe

croganm•12/2/24, 10:12 PM

Why not just have schedule now below the text?

DonaldOP•12/2/24, 10:13 PM

Okay well I'll just take it as is. I'm sure there is a way to do it at Grid. I may try that route

DonaldOP•12/2/24, 10:13 PM

I may try that too

DonaldOP•12/2/24, 10:13 PM

I just like the way it looks this way

croganm•12/2/24, 10:14 PM

I'm not sure about dyanmically. You're saying something like this right?

DDonald Okay well I'll just take it as is. I'm sure there is a way to do it at Grid. I m...

croganm•12/2/24, 10:16 PM

The issue is it's a variable width piece of text. HTML and CSS don't know the exact positioning of each word, just the attributes of the entire element, so I'm not sure how it would know something like that

croganm•12/2/24, 10:16 PM

It doesn't know where "You" ends and how much width the parent element as to calculate the amount of white space to take over

DonaldOP•12/2/24, 10:24 PM

If I used grid it would be like putting a jigsaw puzzle of words together.

Ccroganm I'm not sure about dyanmically. You're saying something like this right?

DonaldOP•12/2/24, 10:25 PM

Yes that!

croganm•12/2/24, 10:27 PM

That was hardcoded, unfortunately there's no actual way to do it. The only way I can maybe think of that is so convuluted is to make every single word in that sentence a span or div or something inside a flex container with flex-wrap and put a flex: 1 1 0% on the button

DDonald Yes that!

croganm•12/2/24, 10:45 PM

Lol this hurts me so much:

https://codepen.io/croganm/pen/QwLbevr

CodePencroganm

Untitled

...

croganm•12/2/24, 10:45 PM

Very ugly JS and css

croganm•12/2/24, 10:45 PM

just used ChatGPT to get me most of the way there as I'm trying to make dinner as well

croganm•12/2/24, 10:45 PM

but I don't recommend doing this

DonaldOP•12/2/24, 10:47 PM

Well I was going to change the button up to make it work but now that I actually see it. I think you're right. I'll just put it under the text. Thanks at least it was a learning experience for me.

DDonald Well I was going to change the button up to make it work but now that I actually...

croganm•12/2/24, 10:51 PM

Lol no problem, glad to help. Sometimes you got to see it yourself to know why it wouldn't be the best

DonaldOP•12/2/24, 10:51 PM

Oh yeah I would have changed it after I looked at it

DonaldOP•12/2/24, 10:52 PM

But the weird thing is there isn't that much white space on my screen

croganm•12/2/24, 10:55 PM

I don't have a banner element is why

DDonald Oh yeah I would have changed it after I looked at it

croganm•12/2/24, 10:56 PM

Removed it since I didn't have an image

DonaldOP•12/4/24, 1:06 AM

This is what it looks like on my screen.

DonaldOP•12/4/24, 1:06 AM

I just wanted it moved to center.

DonaldOP•12/4/24, 1:33 AM

But here it is now.

Ccroganm Removed it since I didn't have an image

DonaldOP•12/4/24, 6:44 PM

I'm trying to come up with a background. Got any ideas?

croganm•12/4/24, 7:03 PM

Definitely like the layout better, as far as background goes, I'd be interested to see that blue within the square stretched across the screen

croganm•12/4/24, 7:04 PM

@Donald you'd have to change the button background color but I think that'd look pretty good

DonaldOP•12/4/24, 7:34 PM

I was thinking of that

DonaldOP•12/4/24, 7:35 PM

I am also leaning towards a gradient of that blue going to that orange with the orange at the bottom of the screen

Ccroganm Definitely like the layout better, as far as background goes, I'd be interested ...

DonaldOP•12/4/24, 7:37 PM

It might look a lot better if I were more skilled with making gradients.

DonaldOP•12/4/24, 7:40 PM

DonaldOP•12/4/24, 7:40 PM

Yikes

croganm•12/4/24, 7:41 PM

Yea not sure about that gradiant, may be a little too agressive haha

DDonald It might look a lot better if I were more skilled with making gradients. 🤣

croganm•12/4/24, 7:42 PM

I'd probably remove the background on that image and just have the seal and test, then put that blue as the background, and make it a subtle gradiant. Something like a blue to a navy blue

croganm•12/4/24, 7:43 PM

If you want some inspiration with code examples, not a bad place to look:
https://preline.co/examples/hero-sections.html

Preline

Hero Sections | Starter Pages & Examples | Preline UI, crafted with...

Hero Sections create a striking first impression with bold visuals and key messages, capturing attention and setting the tone for the content.

croganm•12/4/24, 7:44 PM

Also here. This is just figma though:
https://www.justinmind.com/blog/inspiring-hero-image-websites/

JustinmindJennifer Pelegrin

40 inspiring hero images examples for your websites

40 examples of hero image website inspiration to boost your conversion rates and impress your users! See how these websites got it right.