Kevin Powell - Community•2y ago

CSS

plz guys how con i do this with html and css

25 Replies

Jochem•2y ago

you're going to have to be a bit more specific

BERSERKOP•2y ago

how can i do this "card" that contains button do i need to use position absolute or something else ??

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

BERSERKOP•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•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•2y ago

Hard to tell anything without code/and proper context

Jochem•2y ago

also ^

vince•2y ago

To me it looks like it's positioned over the footer

BERSERKOP•2y ago

its hard to tell but if you have a code plz send

vince•2y ago

Could use negative margins or absolute positioning, not sure the best way

BERSERKOP•2y ago

i did that but it's look weird

Jochem•2y ago

can't you just link the page it's on?

BERSERKOP•2y ago

it's not best practice i thinks how can i do that??

Jochem•2y ago

where did you take the screenshot? Paste the URL in the chat here if you can

BERSERKOP•2y ago

it's a challenge in the front end mentor here's the design

BERSERKOP•2y ago

vince•2y ago

I can give it a whirl in codepen when I'm on my computer in about 45minutes

BERSERKOP•2y ago

it will be helpful to do that:D

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•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.

BERSERKOP•2y ago

thank you so much

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

BERSERKOP•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•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

BERSERKOP•2y ago

yeah it did thanks alot

Gaming

Programming

CSS