how to fix flex-direction: column; alignment here
.intro__area {
grid-column: span 6;
display: flex;
flex-direction: column;
gap: 2rem;
}
14 Replies
need more to go on
please provide a codepen or demo of the issue its the best way
https://codepen.io/vikram-j/pen/RNwBjqg here you go
you only have one child
intro__area > pre__header
you need the flex direction on pre__header not its parent
or don't even use flex imo
If there is no reason to change the flex direction (i.e from row to col in a media query) its best to just use block/grid.
sidenote: you could be using <nav> for your container inside header for proper semanticsby default flex is in the row
yes and by default block and grid items stack
and I have 2 containers as default names does that effect the code
lost me
this is your desired outcome yes?
yes
then just change preheader to display: grid
and don't even set flex on the parent `introarea`
cause its doing nothing with a signle child atm
lovely
and I meant this div can be <nav>
well .. should be (for proper semantics, and a11y)
thanks a lot I changed it