CSS

plz guys how con i do this with html and css
25 Replies
Jochem
Jochem•2y ago
you're going to have to be a bit more specific
BERSERK
BERSERK•2y ago
how can i do this "card" that contains button do i need to use position absolute or something else ??
Jochem
Jochem•2y ago
you can use this on the div the text and button are in:
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
that'll get things displaying one below the other and centered
BERSERK
BERSERK•2y ago
no you miss understand me hahaha look that div that containes the text and buttons that div it's between like the footer and the other section my question is how can do the like put in that div between the footer and the other section
Jochem
Jochem•2y ago
oh, that I think it's just a <dialog> opened with showModal(). It's centered in the viewport and that's just where it ended up
b1mind
b1mind•2y ago
Hard to tell anything without code/and proper context
Jochem
Jochem•2y ago
also ^
vince
vince•2y ago
To me it looks like it's positioned over the footer
BERSERK
BERSERK•2y ago
its hard to tell but if you have a code plz send
vince
vince•2y ago
Could use negative margins or absolute positioning, not sure the best way
BERSERK
BERSERK•2y ago
i did that but it's look weird
Jochem
Jochem•2y ago
can't you just link the page it's on?
BERSERK
BERSERK•2y ago
it's not best practice i thinks how can i do that??
Jochem
Jochem•2y ago
where did you take the screenshot? Paste the URL in the chat here if you can
BERSERK
BERSERK•2y ago
it's a challenge in the front end mentor here's the design
BERSERK
BERSERK•2y ago
vince
vince•2y ago
I can give it a whirl in codepen when I'm on my computer in about 45minutes
BERSERK
BERSERK•2y ago
it will be helpful to do that:D
b1mind
b1mind•2y ago
The point of FEM is to practice these things, asking questions about how is fine but try to make it first. Then ask questions about the code you wrote (share in a codepen) Also PSA: Don't live by the defaults and starters, they come with imo bad practices. Use them a "guidelines" same with the designs
vince
vince•2y ago
Here's the quick and dirty: https://codepen.io/vince1444/pen/QWVLRJV, I'm not great at html and css so there is definitely a better solution to be had but it seems responsive but you're going to have to play around with it.
BERSERK
BERSERK•2y ago
thank you so much
vince
vince•2y ago
Just realized I messed it up, I have to edit it when I get home again I saved it, might be a bit more responsive now
BERSERK
BERSERK•2y ago
the one think that i didn't understand is why you didn't apply the position:absolute; to the section i try it but it goes misssy
vince
vince•2y ago
I made that change today and added a margin-top to the footer to add white space Didn't realize I used position relative twice 😂 Changes should be reflected in the codepen
BERSERK
BERSERK•2y ago
yeah it did thanks alot
Want results from more Discord servers?
Add your server