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.
75 Replies
The text of button by default lines up to the base line of the h1.
You can change the alignment with
vertical-align: middle
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.
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
Why not just have schedule now below the text?
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
I may try that too
I just like the way it looks this way
I'm not sure about dyanmically. You're saying something like this right?
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
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
If I used grid it would be like putting a jigsaw puzzle of words together.
Yes that!
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 😂
Lol this hurts me so much:
https://codepen.io/croganm/pen/QwLbevr
Very ugly JS and css
just used ChatGPT to get me most of the way there as I'm trying to make dinner as well
but I don't recommend doing this
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.
Lol no problem, glad to help. Sometimes you got to see it yourself to know why it wouldn't be the best 😂
Oh yeah I would have changed it after I looked at it
But the weird thing is there isn't that much white space on my screen
I don't have a banner element is why
Removed it since I didn't have an image
This is what it looks like on my screen.
I just wanted it moved to center.
But here it is now.
I'm trying to come up with a background. Got any ideas?
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
@Donald you'd have to change the button background color but I think that'd look pretty good
I was thinking of that
I am also leaning towards a gradient of that blue going to that orange with the orange at the bottom of the screen
It might look a lot better if I were more skilled with making gradients. 🤣
Yikes
Yea not sure about that gradiant, may be a little too agressive haha
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
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.
Also here. This is just figma though:
https://www.justinmind.com/blog/inspiring-hero-image-websites/
Jennifer Pelegrin
Justinmind
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.
That's an image of my logo so i can't actually remove the blue but I made the color my background and you cant see the square there anyway
oh wait i could use the canva background eraser but it isn't showing up anyway
I did so but I'm trying to figure out what color to make the button
That's fair but I as a business owner myself, I probably have like 20 variations of my logo
transparent, white, color, square, rectangle, circle
You name it I've made it haha
This could be a good time to look at adding a tertiary color (aka a 3rd color)
@croganm how's that?
It just seems so dark to me but ehh
I mean just to be brutally honest, not my favorite...
Normally, I try to keep the logo in the header
Which part?
I think using an actual image would go a long way in that spot
for example?
And maybe try using a dark slate color for the background color, could help the orange stand out.
But pretty much take your pic, any stock image would help probably
when you say keep it in the header you mean to the left of the menu right?
or in the middle of it
dark slate color?
I mean here's an example of a site I built to give you an idea:
https://www.americanmedicalhearingcenters.com/
Not saying everyone should copy it or something but it uses a similar blue color scheme that could probably be swapped with orange pretty easy
American Medical Hearing Centers - Hearing Care Services
Experience exceptional hearing care with our team of audiologists and specialists. Comprehensive services, advanced technology, and personalized solutions.
That dark background color is dark, but has a hint of blue in it
blue and orange compliment each other well but you need to keep your background either dark or light to help the contrasting flow well
I see it. I was just hoping to make the site more vibrant
It can definetly be vibrant, but you can't sacrifice on readibility
i was going to stick to a white background but it just looked to plain
make it vibrant with animations or something
oh yes I get htat
that
And it doesn't have to be plain white
The site I built is simple looking mainly because I deal with the older population and animations and scroll effects don't do very well with that demographic. But you can spice up your website in a million ways. Have you looked at other notary companies websites for comparisons?
There are times to be creative with a website, but the basics are basics usually for a reason
Yeah a lot of them are very plain or made with freaking wix or something
Not a ton of mobile notaries
That's fair, but I guarantee they work and drive traffic
And I'm in Florida
So I'd like to keep that vibrant feel you know?
Or at least just white without sacrificing
If you want more advanced looking, try getting inspiration from online notary companies. They are trying to reach a more tech savvy market and as such, build more exciting websites than most mobile notaries
Thanks for the advice and help. I'll try looking at some of those now
How do you like this?
@croganm
I plan on making a banner with links above it. I may have to bring the text down some more
one quick and dirty secret for gradients is that you want to pick colors where the straight transition between them doesn't go through a lower saturation area
Can you give me an example on that please?
He's spot on. If you've ever looked at an rgb color slider
basically, you want the line between the colors to stay out of the middle
You want to pick colors next to each other
and if you need to go through the middle, you want to go around it
see how the middle of that wheel is full of poo colors? If you go from right to left, you have this unsaturated blob of sadness in the middle, even if your colors are nice and vibrant at the start and end of the gradient
Also if take that approach, I'd put an overlay over the image to improve readability
you want to pick a color space and then transition along lines of similar saturation, so either from red to yellow for example, or from red through yellow to green, but never straight from red to green because then you get the flat stuff in the middle
see how the first one looks like shitty, but the second one looks nicer? That's cause the first one goes through the center of sadness, and the second one goes around through the yellow
ahh okay thanks for the tip
very quick and dirty, you can see the "path" the gradient takes here:
the straight line (first gradient) has lots of unsaturated stuff in there, where the two stepped line for the second gradient stays relatively stable in saturation
I think you can do this with different color space gradients too, but that's way above my paygrade. I just add steps around the wheel until it looks good
Nice this is great info
sweet I'll have to look up how to do an overlay again I haven't done one in a while
is there a site that helps you figure out wich color codes work best with each other?
You can look at color palette pickers, don't have any handy right now though
I think i have some of those saved for later
How's this?
@Jochem @croganm
I placed an overlay on the button as well. just in the background
Given that you're doing orange text, maybe a dark overlay would be better? I think you need to make the overlay have a higher opacity still. Starting to come together though!
Okay I'll adjust that