WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Last modified 7 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 18 months ago.
SCR-20240403-pvqj.png​ (83.6 KB) - added by karmatosed 8 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
18 months ago

#3 @sabernhardt
18 months 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 18 months ago by sabernhardt (previous) (diff)

#4 @karmatosed
8 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
8 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
8 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
8 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
8 months ago

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

#9 @sabernhardt
7 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
7 months ago

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