WordPress.org

Making WordPress.org

Opened 11 months ago

Closed 5 months ago

Last modified 5 months ago

#3777 closed enhancement (fixed)

Bad CSS Code hides the bottom 24 pixels (11%) of theme screenshots

Reported by: ilovewpcom Owned by: coffee2code
Milestone: Priority: normal
Component: Theme Directory Keywords: dev-feedback has-screenshots has-patch
Cc:

Description

The current CSS code for displaying the themes (in list mode) CUTS out from the bottom 24 pixels of an already short screenshot. Considering that the total height is ~214, taking out 24 pixels is 11%!

Fixing this takes about 60 seconds.

.theme-browser .theme .theme-screenshot img - should not have absolute positioning.
.theme-browser .theme .theme-screenshot:after - should not even exist.

We immediately get 100% of our screenshots visible in the /themes/ list pages.

Attachments (3)

wordpress-org-themes-bad-css.png (402.7 KB) - added by ilovewpcom 11 months ago.
This is an example of the bottom 24 pixels that each theme loses.
img.png (479.5 KB) - added by Presskopp 10 months ago.
meta-3777.diff (1.1 KB) - added by pratikthink 7 months ago.

Download all attachments as: .zip

Change History (19)

@ilovewpcom
11 months ago

This is an example of the bottom 24 pixels that each theme loses.

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


11 months ago

#2 follow-ups: @Otto42
11 months ago

Your "fix" seems to cut the name off of the bottom of the screenshot.

#3 in reply to: ↑ 2 @ilovewpcom
11 months ago

Replying to Otto42:

Your "fix" seems to cut the name off of the bottom of the screenshot.

The screenshot does not contain the result of removing the CSS lines.
The screenshot is there to demonstrate the part of the screenshots that is hidden by the titles.

#4 in reply to: ↑ 2 @DannyCooper
11 months ago

Replying to Otto42:

Your "fix" seems to cut the name off of the bottom of the screenshot.

If the correct CSS was provided, would this be implemented?

#5 @mukesh27
11 months ago

  • Keywords needs-patch added

#6 @ilovewpcom
10 months ago

Is there any luck to get this fixed?
It's a simple CSS fix, shouldn't take more than 5 minutes, but would help with presenting our themes a little better in the repo.

#7 @mukesh27
10 months ago

  • Keywords ui-feedback dev-feedback added
  • Type changed from defect to enhancement

This ticket was mentioned in Slack in #meta by dannycooper. View the logs.


10 months ago

#9 @Presskopp
10 months ago

I can confirm that the patch like described above will work fine (tried with browser console). It only needs to be made by someone.

.theme-browser .theme .theme-screenshot img - should not have absolute positioning.
.theme-browser .theme .theme-screenshot:after - should not even exist.

I'm also not sure if these are needed:

height: auto;
left: 0;
width: 100%;

@Presskopp
10 months ago

#10 @Presskopp
10 months ago

  • Keywords has-screenshots added

This ticket was mentioned in Slack in #themereview by dannycooper. View the logs.


10 months ago

#12 @pratikthink
7 months ago

  • Keywords has-patch added; needs-patch ui-feedback removed

1200 × 900 (recommended theme screenshot size) aspect ratio 4:3
572 × 429 (theme gallery screenshot size) aspect ratio 4:3

So I think there is no need to set a fixed aspect ratio for the theme gallery screenshots

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


6 months ago

#14 @coffee2code
5 months ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 8222:

Theme Directory: Prevent clipping bottom portion of theme screenshots in theme browser.

Props pratikthink, presskopp, ilovewpcom.
Fixes #3777.

This ticket was mentioned in Slack in #themereview by ilovewpcom. View the logs.


5 months ago

Note: See TracTickets for help on using tickets.