Making WordPress.org

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#4491 closed defect (bug) (fixed)

Archive page shows 2 columns instead of 3 at certain media queries

Reported by: milana_cap's profile milana_cap Owned by: dufresnesteven's profile dufresnesteven
Milestone: Priority: normal
Component: HelpHub (wordpress.org/documentation) Keywords: has-screenshots has-patch
Cc:

Description

CSS used for these columns should be changed to something more reliable and up to date. This is what we have now:

@media (min-width: 48em)
.three-up .archive-block, .three-up > div {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-right: 4.5%;
    font-size: 0.8rem;
}

.three-up .archive-block:nth-child(3n), .three-up > div:nth-child(3n) {
    margin-right: 0;
}

Using either Flexbox or CSS Grid would make columns behave better.

One of effected pages: https://wordpress.org/support/category/getting-started/

Screenshot:

https://user-images.githubusercontent.com/7957680/41554497-a217d596-72fa-11e8-9c20-2500a7d880c8.jpg

Attachments (2)

4491.patch (1.4 KB) - added by milana_cap 5 years ago.
WP - HH - Articles 2.png (255.9 KB) - added by estelaris 5 years ago.
HH Category list-format

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in Slack in #docs by zzap. View the logs.


5 years ago

@milana_cap
5 years ago

#2 @milana_cap
5 years ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in Slack in #docs by zzap. View the logs.


5 years ago

This ticket was mentioned in Slack in #docs by zzap. View the logs.


5 years ago

#5 @estelaris
5 years ago

  • Keywords needs-design added

This ticket was mentioned in Slack in #docs by zzap. View the logs.


5 years ago

This ticket was mentioned in Slack in #docs by zzap. View the logs.


5 years ago

#8 @estelaris
5 years ago

  • Keywords needs-design removed
  • Resolution set to invalid
  • Status changed from new to closed

In order to avoid the column issue, a list-format is better to show an index of all articles in a category.

There are several advantages:

  • List can grow as needed
  • no issues if one description is larger than another since there will be only rows and one column
  • will simplify user interaction as the list will present 1 to 2 pages with articles instead of having to click through 6 screens to find what is needed

#9 @estelaris
5 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

@estelaris
5 years ago

HH Category list-format

This ticket was mentioned in Slack in #docs by estelaris. View the logs.


5 years ago

This ticket was mentioned in Slack in #docs by estelaris. View the logs.


4 years ago

This ticket was mentioned in Slack in #docs by softservenet. View the logs.


4 years ago

#13 @dufresnesteven
4 years ago

This patch looks fine to me.

Alternatively, we could give the inner container a width of 33.3333333% and add padding within that container, but that's just preference.

@estelaris Maybe we want to start a new ticket with your proposed changes to keep this one true and actionable? Adding a patch to fix the columns could improve experience while we figure out the best approach for this page.

#14 @dufresnesteven
4 years ago

  • Owner set to dufresnesteven
  • Resolution set to fixed
  • Status changed from reopened to closed

In 9931:

Support: Update 3x3 grid to fix column break in medium sized viewports.

Props milana_cap
Fixes: #4491

#15 @dufresnesteven
4 years ago

@milana_cap I applied the patch although I recognize there are more instances that should be addressed. There are a few tickets that have advanced far enough to suggest real changes will happen to these layouts. So with that in mind, I have closed this out.

You can follow along here:
https://meta.trac.wordpress.org/ticket/4007

Thanks!

Note: See TracTickets for help on using tickets.