HOW TO MAKE HEADER CONTENT LINE UP WITH FLEXBOX COLUMNS
how do i make it so that the pic on the left and github button line up with the ending of the flex box columns?
19 Replies
WHAT I DID :
was increase the width of the flex box column containers
it practically lines up now
but i'm not sure
it's not perfecT?
surely there's a better way to do this??
any ideas?
Without the html and css, we can only guess. But... we don't like to guess 😉
Please provide the code (preferably in a working codepen so we can fiddle with it ourselves).
it doesn't look like this when i run it locally obviously or on github pages
Line up things with flex? You don't. It may work, but theres no guarantee. If you want things to line up the use of grid is way easier.
it lines up with the width set at 32.5% almost
damn okay got it
Its called "flex" for a reason, its flexible, where grid is rigid.
With all the cool grid functions you can do most of the things (single line) flex can do, too.
you can use justify-content: space-between and remove the margin on the h1. instead use gap on the header to create extra spacing between the items
wait
ill try this one sec
does the justify-content: space-between go in the header flex box container right?
the thing is
i already have justify-content: center;
in the header flex box container
can i have two justify-contents?
justify-content space between in the header
makes everything too spaced out ^^
if you want to have it the same width of the main, you should make both containers the same width.
Now you are using percentages for the 2 columns in main, but if you set up main to a max width, you could just do flex 1 one both
Also, I see a lot of hard coded heights
To be totally honesty. I think you are missing some basic fundamental css knowledge
u mean have the header container the same width as the column container?
what shld i use instead of hard coded values
percentages?
does this count sa hard coded height?
i mean when i remove both the min-height and min-width the code seems to function normally
i need the header container to be 100% so it will be 100% of the page
the issues lay here:
