Opened 8 months ago

Closed 8 months ago

#7193 closed defect (bug) (fixed)

The tab HTML is responsible for the overflow issue in mobile responsive design.

Reported by: truptikanzariya's profile truptikanzariya Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Photo Directory Keywords: has-screenshots has-patch


In the context of mobile responsive design, the challenge of overflow is directly linked to the tab HTML element. This issue arises when the content within the tab surpasses the available space on smaller screens, leading to unwanted scrolling or content getting cut off.

I have attached the screenshot for better understanding.

Here is the CSS that we can add to fix the above issue:

div.attribution .attribution-text .tab-content .tab {
    display: none;
    word-break: break-word;

Attachments (1)

20664cb676-–-WordPress-photo-WordPress-org-Photo-Directory.png (85.2 KB) - added by truptikanzariya 8 months ago.

Download all attachments as: .zip

Change History (3)

This ticket was mentioned in PR #173 on WordPress/ by @dhruval04.

8 months ago

  • Keywords has-patch added; needs-patch removed

#2 @coffee2code
8 months ago

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

In 12839:

Photo Directory: Explicitly declare word-break:break-word; for attribution tabs to prevent overflow at narrow viewports for certain browsers.

Props truptikanzariya.
Fixes #7193.

Note: See TracTickets for help on using tickets.