Making WordPress.org

Opened 3 years ago

Closed 6 weeks ago

#6926 closed defect (bug) (worksforme)

Paragraph and Image are aligned inline

Reported by: patelhitesh Owned by:
Priority: low Milestone:
Component: HelpHub (wordpress.org/documentation) Keywords: has-screenshots
Cc:

Description

Please check the below URL:
https://wordpress.org/documentation/article/gallery-block/

When we inspect the page and check the page width 425px wide the paragraph and image are aligned inline-block instead of block.

For more details, please check the attached screenshot

Attachments (1)

CleanShot 2023-04-07 at 15.07.55@2x.png (223.1 KB ) - added by patelhitesh 3 years ago.
Paragraph and image are aligned inline

Download all attachments as: .zip

Change History (4)

@patelhitesh
3 years ago

Paragraph and image are aligned inline

#1 @patelhitesh
3 years ago

To overcome the issue, please find the below CSS:

body .is-layout-constrained > .alignright { float: none; }

#2 @coffee2code
3 years ago

  • Component WordPress.org SiteHelpHub (wordpress.org/documentation)
  • Priority normallow

Just to rephrase what seems to be reported: right-floated images (of which there are currently at least 3 on the page) continue to remain right-floated at narrower viewports. At these narrower viewports, the paragraphs to the left of any of these images will become increasingly narrower themselves to the detriment of readability. I believe the ticket reporter is choosing 425px arbitrarily as a good place to make the right-floated images behave as blocks/non-floated and not that there's anything special about that width, which is reasonable (definitely below 400px it is an issue).

FYI: The theme for the documentation site is hosted on GitHub at https://github.com/WordPress/wporg-documentation-2022.

#3 @obenland
6 weeks ago

  • Keywords needs-patch needs-design-feedback removed
  • Resolutionworksforme
  • Status newclosed

It looks like this may have been fixed in a page update. Please feel free to reopen if there are additional steps to reproduce this.

Note: See TracTickets for help on using tickets.