[wp-meta] [Making WordPress.org] #6175: css issue found in handbook page

[Making WordPress.org]

#6175: css issue found in handbook page
-------------------------------------------------+-------------------------
 Reporter:  kajalgohel                           |       Owner:  (none)
     Type:  defect                               |      Status:  new
 Priority:  normal                               |   Milestone:
Component:  Handbooks                            |  Resolution:
 Keywords:  has-patch needs-design-feedback      |
  has-screenshots                                |
-------------------------------------------------+-------------------------

Comment (by 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`

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6175#comment:2>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org