Make WordPress Core

Opened 5 weeks ago

Closed 13 days ago

#61075 closed defect (bug) (worksforme)

Unmodified Twenty Twenty-Four Theme Layout Breaks on Mobile

Reported by: script2see's profile script2see Owned by:
Milestone: Priority: normal
Severity: major Version: 6.5.2
Component: Bundled Theme Keywords: reporter-feedback close
Focuses: css Cc:

Description

I initiated a fresh installation of WordPress 6.5.2 on my offline testing server, LocalWP. Twenty Twenty-Four is the base theme, and I have not modified it at all.

As you will see from the attached screenshots, the layout for the default home page breaks during mobile-responsive testing for the iPhone 14 Pro Max in the Developer tools from Google Chrome. This dooesn't happen on every page load but appears to occur randomly.

Attachments (4)

twenty-twenty-four-broken-responsive-layout-iPhone-Pro-Max-Portrait-Position.jpg (228.3 KB) - added by script2see 5 weeks ago.
Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhone Pro 14 Max
twenty-twenty-four-broken-responsive-layout-iPhone-Pro-Max-Landscape-Position.jpg (283.0 KB) - added by script2see 5 weeks ago.
Unmodified Twenty Twenty-Four Home Page in Landscape view for iPhone Pro 14 Max
no-plugins.jpg (137.6 KB) - added by script2see 5 weeks ago.
No Plugins Installed
twenty-twenty-four-broken-responsive-layout-iPhone-X-Portrait-Position.jpg (161.0 KB) - added by script2see 5 weeks ago.
Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhoneX

Download all attachments as: .zip

Change History (11)

@script2see
5 weeks ago

Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhone Pro 14 Max

@script2see
5 weeks ago

Unmodified Twenty Twenty-Four Home Page in Landscape view for iPhone Pro 14 Max

@script2see
5 weeks ago

No Plugins Installed

#1 @script2see
5 weeks ago

The attached photos show the layout breaking, as well as the fact that I haven't installed any plugins.

@script2see
5 weeks ago

Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhoneX

#2 @jamieblomerus
3 weeks ago

  • Component changed from General to Bundled Theme

#3 @jamieblomerus
3 weeks ago

  • Resolution set to worksforme
  • Status changed from new to closed
  • Version changed from trunk to 6.5.2

I have tried to reproduce this issue locally (using both the version in trunk and reported version 6.5.2), but there does not seem to be any problem with the bundled theme.

As you also reported that it occurs randomly it is more probably a problem with your browser.

#4 @script2see
2 weeks ago

I managed to null out some of the problem by writing the following style rules:

main#wp--skip-link--target {
	width: 100% !important;
}

.entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
	width: 100% !important;
}

The fact that those rules eliminated part of the problem is proof that there is indeed a problem.

I also added the following to theme.json to stop root-level padding from breaking layouts:

"styles": {
	"spacing": {
				"padding": {
				"left": "0",
				"right": "0"
			}
		}

#5 @jamieblomerus
2 weeks ago

  • Keywords reporter-feedback added; needs-patch removed
  • Resolution worksforme deleted
  • Status changed from closed to reopened

Okay, but the problem does not seem to be able to be reproduced. To help us reproduce the issue, could you reproduce the problem on a public site and then send a link?

Also, could you share more info about your system and browser? Please navigate to the admin panel, Tools -> Site Health, and choose the " Info " tab. Then click the button "Copy site info to clipboard" and paste the content here. Getting information about your browser differs from browser to browser, but a quick Google search should show you the steps needed.

Please perform this and send the requested information, so I can continue the testing.

#6 @karmatosed
2 weeks ago

  • Keywords close added

I am also unable to replicate this so for now going to mark this to close. We can always reconsider if this has more information later. Thank you everyone.

#7 @karmatosed
13 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from reopened to closed

For now I am closing this and we can always reopen, thank you everyone.

Note: See TracTickets for help on using tickets.