WordPress.org

Making WordPress.org

Opened 13 months ago

Closed 7 months ago

Last modified 7 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 13 months ago.
This is an example of the bottom 24 pixels that each theme loses.
img.png (479.5 KB) - added by Presskopp 12 months ago.
meta-3777.diff (1.1 KB) - added by pratikthink 10 months ago.

Download all attachments as: .zip

Change History (19)

@ilovewpcom
13 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.


13 months ago

#2 follow-ups: @Otto42
13 months ago

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

#3 in reply to: ↑ 2 @ilovewpcom
13 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
13 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
13 months ago

  • Keywords needs-patch added

#6 @ilovewpcom
12 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
12 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.


12 months ago

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

#10 @Presskopp
12 months ago

  • Keywords has-screenshots added

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


12 months ago

#12 @pratikthink
10 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.


9 months ago

#14 @coffee2code
7 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.


7 months ago

Note: See TracTickets for help on using tickets.