Finessing the Flex(box)

I left the reinstating fixed positioning on my header for today because just at a glance I could tell that it was going to need some special attention, not just to fit in with the new flexbox positioning in the rest of the page but also because I was using a float on the logo and I wanted to get rid of it.

I started by turning the header itself into a flexbox with row wrapping, turning the navbar into yet another flexbox row (no wrapping) and centering everything (I set it all to flex-start along the cross-axis, though, to keep the header as short as possible.

That left me with the issue of the navbar appearing to the right of the title when I wanted it to wrap to a second row. I found the solution here: Turns out I needed to give the navbar container a flex-basis of 100% so that it would drop to a new row and fill it. This fix had an added benefit of helping me better understand exactly what kinds of values can go into that particular CSS property and what it does.

While I was at it, I added some :hover rules to my header because it’d been looking way too plain.

Next up, I needed to reinstate the header’s fixed positioning, which only required the position, top and z-index properties. Plus the anchor positioning rules handling the necessary offsets that I commented out yesterday while I rebuilt the positioning in flexbox:

.anchor{ /* to address fixed header offset */
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

After that, I tweaked the media queries to account for the change in responsiveness (the new queries have much less work to do because flexbox is pretty responsive on its own).

THEN I moved onto the submit page, which turned out to be a much bigger headache than I anticipated because it did not play well with the new flexbox rules at all. I spent a while tweaking before I realised that it was a simple matter of giving both pages (the form and the submit) an encompassing flexbox section element to kick things off. From there it was a matter of making sure that I hadn’t broken the form’s layout and media queries (I hadn’t), pushing everything to the repository’s new flexbox branch and calling it a day.

WHEW!

I’m planning to review grid layouts tomorrow (and I want to start a new project for that one because I have HAD IT with this form), but I have a pretty stiff deadline that’s pending external inputs so I’m already bracing for the reality that I might not be able to dig into it the way I’d like until Friday. 😔

Such is the pandemic consultancy life.