Make WordPress Core

Opened 3 years ago

Closed 2 months ago

#53649 closed defect (bug) (worksforme)

Twenty Twenty-One: Footer widget CSS grid

Reported by: htmgarcia's profile htmgarcia Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: reporter-feedback close
Focuses: css Cc:

Description

WordPress 5.8 RC2

When placing a block such as slider using [Slick](https://github.com/kenwheeler/slick) in footer (may happens with other blocks), the width of the footer can be longer than the available on the theme causing to display an horizontal scrollbar and messed up the width of the 3 footer widgets columns.

Solution:
in Twenty Twenty-One theme, when the CSS Grid columns width is defined, use minmax() in combination with 1fr.

grid-template-columns: repeat(2, minmax( 0, 1fr ));
grid-template-columns: repeat(3, minmax( 0, 1fr ));

Attachments (2)

Screen Shot 2021-07-12 at 14.20.49.png (100.8 KB) - added by htmgarcia 3 years ago.
Slideshow Block inside a CSS Grid column
Screen Shot 2021-07-12 at 14.22.08.png (126.2 KB) - added by htmgarcia 3 years ago.
When using minmax() the Block takes the column's width

Download all attachments as: .zip

Change History (8)

@htmgarcia
3 years ago

Slideshow Block inside a CSS Grid column

@htmgarcia
3 years ago

When using minmax() the Block takes the column's width

#1 @SergeyBiryukov
3 years ago

  • Summary changed from Twenty twenty-One theme footer widgetCSS grid to Twenty Twenty-One: Footer widget CSS grid

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


3 years ago

#3 @desrosj
3 years ago

  • Keywords reporter-feedback added

@htmgarcia Thanks for this ticket! And welcome to Trac!

Can you provide a bit more detail? Some code that can be used to demonstrate the problem would be helpful for others to gain an understanding of what's happening. The GitHub you linked to is a JavaScript library, but there's no indication of how it's being used within WordPress.

#4 @poena
17 months ago

  • Severity changed from major to normal

I haven't been able to find a way to reproduce this. @htmgarcia Are you able to provide any more details, or has the problem perhaps been solved?

#5 @karmatosed
2 months ago

  • Keywords close added

I find myself in the same position as @poena and others of being unable to reproduce this. I am going to recommend for now this moves to close, that said if we do find steps from yourself @htmgarcia that can clarify what we might be missing, we absolutely can review. Thank you everyone for collaborating on this.

#6 @karmatosed
2 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Thanks everyone let's close this as there seems no further information for now on how to reproduce. If this does appear we can always revisit this.

Note: See TracTickets for help on using tickets.