Overlapping Header with CSS Grid

Featured Imgs 23

Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:

Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a margin-top: -50px or whatever the design calls for.

If you match the margin and padding with a situation like this, it’s not exactly magic numbers, but it still doesn’t feel great to me beaus they’re still numbers you need to keep in sync across totally different elements.

His idea? Build it with CSS grid instead. Definitely feels much more robust.

Random coinsidence, I was reading Chen Hui Jing’s “The one in black and orange” post and the pattern showed up there as well.

(I ended up doing a video on this).

Direct Link to ArticlePermalink

The post Overlapping Header with CSS Grid appeared first on CSS-Tricks.

WordPress Birthday, Elementor Milestone, Template Kits, PHP and WP Version Checks 🗞️ June 2020 WordPress News w/ CodeinWP

Category Image 091
Hi everyone! The past weeks freed us from our houses and apartments a little bit. We could go out for long walks and some fresh air, respecting the social distancing rules, of course. I think it makes a difference, being able to change scenery even slightly. With a more optimistic view for the rest of the year, let’s review the latest happenings in WordPress!