WordPress.org

Making WordPress.org

Opened 8 days ago

Closed 8 days ago

#5110 closed defect (fixed)

Themes Directory, Preview images are disproportionately skewed on smaller viewports

Reported by: dufresnesteven Owned by: dd32
Milestone: Priority: normal
Component: Theme Directory Keywords:
Cc:

Description

Theme Directory https://wordpress.org/themes/.

We currently set .theme-browser .theme .theme-screenshot img { width: 100% } on theme preview images. This leads to images that are stretched horizontally.

We should remove that stretch. Ideally we would have a more responsive grid but as a quick alternative, we can update the theme-screenshot container to have an off white background and center the image.

Attachments (4)

stretched.png (977.7 KB) - added by dufresnesteven 8 days ago.
withoutstretch.png (833.4 KB) - added by dufresnesteven 8 days ago.
5110.diff (1.2 KB) - added by dufresnesteven 8 days ago.
Update the image sizes & breakpoints to not stretch the theme preview image.
theme_img_update.gif (5.3 MB) - added by dufresnesteven 8 days ago.
Updates in 5110.diff

Change History (6)

#1 @dd32
8 days ago

This is a result of #4499

Centering the images is certainly better than the stretch, so we should probably just do that unless you've got another idea based on the other ticket :)

@dufresnesteven
8 days ago

Update the image sizes & breakpoints to not stretch the theme preview image.

@dufresnesteven
8 days ago

Updates in 5110.diff

#2 @dd32
8 days ago

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

In 9622:

Theme Directory: More responsive styling for the theme listing.

This should fix the stretched theme images in certain responsive sizes.

Props dufresnesteven.
Fixes #5110, #4499.

Note: See TracTickets for help on using tickets.