Handbook name overlaps breadcrumbs on mobile

[kajalgohel]

The handbook name and breadcrumbs need more space in between. It is look very weird in small device also in below page.

​https://make.wordpress.org/community/handbook/wordcamp-organizer

[kajalgohel]

patch added

[nidhidhandhukiya]

As per patch Instead of 6rem the 7rem should be best for spacing related for responsive kajal's patch looks good but as an enhancement instead of 6rem we use 7rem from a top so it looks more good.

[vijayhardaha]

Patch test on styleguide page with small screen

[vijayhardaha]

I have a few suggestions for handling the container and breadcrumbs UI

If there are no intentional reasons to keep the handbook container, breadcrumb outside of the #primary area then we can move this whole code under <div id="primary" class="content-area"> And revise the handbook container, breacrumbs without using position absolute for left and top.
Also, make revisions on content-area padding-top and use less responsive breakpoints.
​https://github.com/WordPress/wordpress.org/blob/5903fe4861e85e6e843e380f26a4bbc3a9ce328f/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/single-handbook.php#L14-L20

If moved PHP code is not possible then .single-handbook #main is set for display:flex; I am not seeing a particular use of flex here and disable that doesn't make any difference in my quick inspection.

However, it solves the problems, we can use handbook container, breadcrumbs and content area as blocks and we don't need absolute positions(for responsive screens) for handbook container, breadcrumbs, all the content will be wrapped easily and adjusted margin & padding automatically.
There is a small issue with disabling flex, that the linear background on #page shows if I make container & breadcrumbs static. That could be fixed by changing the margin to padding and setting the background white.

Another workaround could be possible if we disable flex only for responsive, and keep enabled for desktop only. and write absolute position only for min-width

[coffee2code]

#6406 was marked as a duplicate.