Make WordPress Core

Opened 14 months ago

Closed 14 months ago

Last modified 14 months ago

#61030 closed defect (bug) (fixed)

Reduce font-size of Credits page h1 element for smaller screens

Reported by: dhruvang21's profile dhruvang21 Owned by: audrasjb's profile audrasjb
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.5
Component: Help/About Keywords: has-patch
Focuses: ui, css, administration Cc:

Description (last modified by sabernhardt)

WordPress credits.php page: font-size of the h1 tag is 4.5rem which is greater than the ideal font-size in the mobile responsive view and as a result of that it is breaking in the responsive view at media size of 355 px as we know that The headings should be around 1.96 times larger than your body text to create a sufficient contrast. so the body text size is of 1.4em which means the h1 tag font-size should be 1.4em * 1.96 = 2.74em. the screenshot of the issue is also attached as below

https://tinyurl.com/273bplzj

Solution :-

@media screen and (max-width: 960px)
.about-php .about__header-title h1, .contribute-php .about__header-title h1, .credits-php .about__header-title h1, .freedoms-php .about__header-title h1, .privacy-php .about__header-title h1 {
    font-size: 2.74em;
}

Attachments (2)

Capture d’écran 2024-04-30 à 08.39.09.png (63.8 KB) - added by audrasjb 14 months ago.
After applying the patch
Capture d’écran 2024-04-30 à 08.42.31.png (72.3 KB) - added by audrasjb 14 months ago.
Looks better on languages with long words too :)

Download all attachments as: .zip

Change History (13)

#2 @sabernhardt
14 months ago

  • Component changed from General to Help/About
  • Summary changed from Font-size of the h1 tag need to be reduce in the mobile reposive view to Reduce font-size of h1 element for smaller screens
  • Version changed from 6.5 to 6.4

Thanks for the report!

[56950] reduced the heading size for WordPress 6.4, but that did not edit the size for smaller viewports.

The larger fluid font size should be changed, too. The minimum value is half the maximum, which is less than 0.61 (see #58603).
clamp(2rem, 20vw - 9rem, 4rem)

#3 @sabernhardt
14 months ago

  • Description modified (diff)
  • Summary changed from Reduce font-size of h1 element for smaller screens to Reduce font-size of Credits page h1 element for smaller screens
  • Version changed from 6.4 to 6.5

#4 @audrasjb
14 months ago

  • Focuses accessibility removed
  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to 6.6
  • Owner set to audrasjb
  • Status changed from new to accepted

Thanks for the ticket!
Adding good-first-bug as it looks like a nice opportunity for people to make their very first Core contribution.

This ticket was mentioned in PR #6434 on WordPress/wordpress-develop by @khokansardar.


14 months ago
#5

  • Keywords has-patch added; needs-patch removed

Reduced the heading size for credits page for smaller viewport.

Trac ticket: #61030

#6 @audrasjb
14 months ago

  • Keywords good-first-bug removed

Thanks for the PR @khokansardar, however please note that as mentioned in comment:4, this ticket was marked as good-first-bug. These tickets are kept for new contributors so they can make their very first contribution.
Removing the workflow keyword since you didn't take it into account.

@audrasjb
14 months ago

After applying the patch

@audrasjb
14 months ago

Looks better on languages with long words too :)

#7 @audrasjb
14 months ago

  • Keywords commit added

#8 @audrasjb
14 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 58060:

Help/About: Reduce About screens heading sizes on smaller viewports.

[56950] reduced the heading size of About screen headings, but that did not edit the size for smaller viewports.
This changeset fixes this issue, and also updates the larger fluid font size (960px - 1200px).

Follow-up to [56950].

Props dhruvang21, sabernhardt, khokansardar.
Fixes #61030.

#10 @sabernhardt
14 months ago

I apparently pasted the wrong example in comment:2, and my point was misunderstood. That value was not a recommendation. 2rem divided by 4rem equals 0.5, which is less than the ratio used on #58603.

If both the size range and maximum are good as they are now, a minimum size of 2.5rem would meet the ratio with 0.625:1.

I also question whether the same value needs to be set in multiple places.

#11 @audrasjb
14 months ago

  • Keywords commit removed

Oh ok..

By the way it looked right on my side when testing the proposed patch. Could you share a quick screenshot of the result you had in mind?

Note: See TracTickets for help on using tickets.