How do I align this to the right side of the screen
I created a button in CSS and I've tried aligning it to the right side of the screen with no luck
35 Replies
The display: flex property (not flexbox) goes onto the parent element not the button itself. But if you’re just wanting to align on the x-axis you can use margin-inline-start: auto or margin-left: auto and it will push it all the way to the left, save any padding on the parent. You don’t need flex or grid on the parent for this but if you want to align on y-axis (up and down) and want to use margin-block or margin-top/margin-bottom of auto you would need flex/grid on the parent
EDIT: I misread, you want it pushed to the right so you want margin-left: auto;
Think about how margin:0 auto; works. It takes the available space on the inline axis and divides it equally between left and right.. using margin-left: auto takes all that available space and puts it all on the left. Margin-right, puts it all on the right. So margin-inline:auto only deals with the x-axis (left and right) and outs it to the center, whether you have a display: block or display: flex; or display: grid
I really recommend watching some of KPs vids on flex and/or grid. They are essential tools these days you’ll have to learn eventually and he’s so good at explaining and can show visuals at the same time.
Understood appreciate you Hart! Helpful like always
A little demonstration lol
If you notice my decent Portfolio, The button on that left side I'd like aligned to the empty green box you see
What does the markup look like?
As in the code?
The html yes
I can create a codepen
That would be helpful
https://codepen.io/hrphyn/pen/PoLzbVB
also, what would the text that says "I am Arman Markaryan." and "I am a Front-End Developer" if you notice when you make the screen smaller it screws up would I need a flex-wrap?
Put a flex on the parent MyNameAndProfression with a justify-content: center and align-items: center
And take off flex-direction: column since you want them in a row
Add a gap to that parent too, then add a flex-wrap of wrap
I'd like them in a column so they stack over one another
if it's in a row wont it all be next to each other?
In this screenshot you said you wanted the button in the empty green box. That’s where they are next to each other
Yea the button class is button-like
Name and profession is the text giving my name and job
I’m not understanding what you want then
I wanted the button that I circled on the left side of the screen to be moved to the empty square thats more towards the right side of the screen
Then that’s not stacking on top of one and other, that’s putting the div holding the text and the div holding the btn in a row
I understand, and I told you how to achieve that and then you said you wanted them to stack so I’m confused
I think I misread and confused myself
Ok let me restart lmfao (apologies) I plan on having two buttons pretty much a copy of the one you see that stack uptop one another and then move it to the empty green square on the right side of the screen
Okay so you want to take your header out of that section, also give it a bg color if it’s gonna be sticky so the items underneath don’t show through
also regarding the button
I did end up creating another then stacking it correctly
but how would I even move it correctly?
it's just stuck on the left side of the screen
the two buttons I circled, They're just stuck and I cant move them correctly
I think we're both messing up, I was speaking regarding these button and you mentioned the header and changing the bg-color so either you responded in the wrong spot or you may have been confused
I’m working on refactoring
I didn’t realize your header was in the same section
Ok i see
Im going to be AFK for about 20 minutes-ish I'll be back, apologies
What
how'd you figure all that out
I noticed you commented out text is that because they're useless?
you didnt comment on all of em
Quick question Hart for the Nav if you scroll down even one bit the top gets bugged out
is that something you gotta deal with?
also could you explain how you did the header? I was tryna understand it but didnt really understand
I just took the header out of that section and gave it a bg colour
what do you mean the top gets bugged out? im not seeing that behaviour
there are comments explaining why anything got commented out
if you look at the header thats black
when I scroll down a tiny bit you can still see the grey uptop
but when you scroll down a lil more it becomes normal and removes the grey above the header
i dont think you updated your codepen. the header is not black there
you also have it sticky and not fixed so as you scroll it will stick to the top and any space between the header and the top of the viewport will show whats bw it. you probably want position: fixed instead