#62647 closed defect (bug) (duplicate)
Fix horizontal scroll in the Theme Details section on smaller devices
Reported by: | im3dabasia1 | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | General | Keywords: | has-patch |
Focuses: | css | Cc: |
Description
The Theme Details section in Appearance > Themes has an x-axis overflow issue on smaller screens(Less than 650px). This is caused by an unnecessary margin on the .theme-screenshots class, leading to a horizontal scroll.
Steps to Reproduce:
- Go to WP-Admin > Appearance > Themes.
- Hover over any theme.
- Click on Theme Details.
- Observe the horizontal scroll caused by the margin-right applied to the '.theme-screenshots' class.
Change History (4)
This ticket was mentioned in PR #7953 on WordPress/wordpress-develop by @im3dabasia1.
7 weeks ago
#1
- Keywords has-patch added
#2
@
7 weeks ago
Video Reference: To showcase the issue, please refer to this video: https://drive.google.com/file/d/1wconcAWCda0uXopz-6Wl9ZMEJBeVGvSi/view
Note: See
TracTickets for help on using
tickets.
Trac ticket: https://core.trac.wordpress.org/ticket/62647
### Description
A margin of 30px was added to the right of the theme screenshots on larger screens (above 650px) to create a gap between the screenshots and the description. However, this margin was not being removed on smaller screens (below 650px), causing an overflow on the x-axis and resulting in a horizontal scroll.
I removed the margin for smaller screens, as it is unnecessary when the screenshots and description are stacked. This change resolves the issue.
### Steps to reproduce:
### Screencast:
Before the patch:
https://github.com/user-attachments/assets/f51782f1-dac0-4fe5-a837-5e6286f76dbb
After the patch:
https://github.com/user-attachments/assets/effadb0f-6c54-4282-857e-feeb1cef85ca