Making WordPress.org

Opened 2 years ago

Closed 5 months ago

Last modified 3 months ago

#6175 closed defect (bug) (fixed)

Handbook name overlaps breadcrumbs on mobile

Reported by: kajalgohel's profile kajalgohel Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Handbooks Keywords: has-patch needs-design-feedback has-screenshots
Cc:

Description

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

Attachments (5)

Screenshot 2022-03-10 at 12.09.56 PM.png (1.3 MB) - added by kajalgohel 2 years ago.
Screenshot 2022-03-10 at 12.13.08 PM.png (1.1 MB) - added by kajalgohel 2 years ago.
#6175.patch (1.3 KB) - added by kajalgohel 2 years ago.
patch added
6175.2.patch (538 bytes) - added by nidhidhandhukiya 2 years ago.
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.
Screenshot 2022-03-14 at 2.45.06 PM.png (68.5 KB) - added by vijayhardaha 2 years ago.
Patch test on styleguide page with small screen

Change History (11)

@kajalgohel
2 years ago

patch added

#1 @kajalgohel
2 years ago

  • Keywords has-patch needs-design-feedback has-screenshots added; needs-patch removed

@nidhidhandhukiya
2 years ago

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
2 years ago

Patch test on styleguide page with small screen

#2 @vijayhardaha
2 years ago

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

#3 @coffee2code
17 months ago

#6406 was marked as a duplicate.

#4 @coffee2code
17 months ago

  • Summary changed from css issue found in handbook page to Handbook name overlaps breadcrumbs on mobile

#5 @coffee2code
5 months ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 12932:

Breathe: Prevent longer handbook names in multi-handbook sites from overlapping breadcrumbs.

Props kajalgohel, nidhidhandhukiya, vijayhardaha, coffee2code.
Fixes #6175.

#6 @coffee2code
3 months ago

#7254 was marked as a duplicate.

Note: See TracTickets for help on using tickets.