WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Last modified 12 months ago

#50026 new enhancement

Twenty Twenty: Full height with short content

Reported by: beaucollins's profile beaucollins Owned by:
Milestone: Future Release Priority: normal
Severity: trivial Version:
Component: Bundled Theme Keywords: has-screenshots needs-testing needs-refresh
Focuses: css Cc:

Description (last modified by SergeyBiryukov)

With the twentytwenty theme, when the height of the content in a page does not fill up the entire viewport, the page ends up with extra trailing whitespace.

If we treat the <body> as a flex box the page will always be filled:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main#site-content {
  flex: 1
}

Attachments (3)

height-example.png​ (227.6 KB) - added by beaucollins 5 years ago.
screenshot of theme with original CSS and new CSS
50026.diff​ (1.1 KB) - added by sabernhardt 2 years ago.
SCR-20240403-pvqj.png​ (83.6 KB) - added by karmatosed 14 months ago.

Download all attachments as: .zip

Change History (13)

@beaucollins
5 years ago

screenshot of theme with original CSS and new CSS

#1 @beaucollins
5 years ago

call will always be filled

#2 @SergeyBiryukov
5 years ago

  • Component changed from Themes to Bundled Theme
  • Description modified (diff)
  • Summary changed from twentytwenty full height with short content to Twenty Twenty: Full height with short content

@sabernhardt
2 years ago

#3 @sabernhardt
2 years ago

  • Keywords has-patch 2nd-opinion added

As part of the ​proposal to retire default themes, Twenty Twenty might not have any more enhancements soon.

If this change might be worth making, I made a patch with the suggested flex styles.

Last edited 2 years ago by sabernhardt (previous) (diff)

#4 @karmatosed
14 months ago

  • Milestone changed from Awaiting Review to 6.6

I actually think this might be a useful enhancement to get in as for me seems to fall on the line between something feels wrong to end user and is just in addition (a pure enhancement). I am going to add this to the next milestone to recommend, but I would like to also see if @sabernhardt you agree with me or counter this considering it's your patch.

#5 @sabernhardt
14 months ago

  • Keywords needs-testing added; 2nd-opinion removed

We have made enhancements to older themes since the retirement proposal, so that should not hold back this ticket.

#6 @karmatosed
14 months ago

  • Keywords commit added

Thank you @sabernhardt in this case then I am going to flag this for commit so we can get this in.

#7 @karmatosed
14 months ago

  • Keywords needs-refresh added; has-patch commit removed

@sabernhardt in testing this it seems that this patch might need a little more work, the flex styles do help however when logged in the admin bar doesn't get taken into account so a scroll is added. This doesn't appear when logged out. You can see this in the attached image on Safari latest version.

For now, going to remove commit keyword as this needs to have more testing and add it needs a refresh to take into account this scroll.

@karmatosed
14 months ago

This ticket was mentioned in ​Slack in #core-themes by karmatosed. ​View the logs.
13 months ago

#9 @sabernhardt
12 months ago

Twenty Twenty has a screen-height class to make an element full-height in the Cover template. The styles for both of these could work together.

However, note that the min-height of 100vh can make those elements too tall on mobile screens (#48837), and ​switching to `height: 100%` could be too short on desktop screens.

#10 @sabernhardt
12 months ago

  • Milestone changed from 6.6 to Future Release
Note: See TracTickets for help on using tickets.