WordPress.org

Making WordPress.org

Opened 2 months ago

Last modified 2 months ago

#4870 new defect

Theme is missing proper image left or right alignment styling

Reported by: bph Owned by:
Milestone: Priority: normal
Component: HelpHub Keywords: needs-patch
Cc:

Description

Earlier today I tried to add an image to a text on an article. It worked fine in the editor as you can see in this screenshot:

In the preview in didn't quite translate it. It was right aligned but on its own 'plane' above the text. Here another screenshot

Attachments (3)

Screen Shot 2019-11-23 at 12.23.46 PM.png (59.6 KB) - added by bph 2 months ago.
Image right aligned in editor next to text
Screen Shot 2019-11-23 at 12.23.37 PM.png (58.8 KB) - added by bph 2 months ago.
Preview of right aligned image
_helphub.scss (1.2 KB) - added by audrasjb 2 months ago.
Patch directly made on the file, since HelpHub repo is not synchronized.

Download all attachments as: .zip

Change History (8)

@bph
2 months ago

Image right aligned in editor next to text

@bph
2 months ago

Preview of right aligned image

This ticket was mentioned in Slack in #docs by bph. View the logs.


2 months ago

#2 @bph
2 months ago

  • Keywords needs-design added
  • Summary changed from HelpHub Theme is missing proper image left or right alignment styling to Theme is missing proper image left or right alignment styling

#3 @bph
2 months ago

pardon the quirky screenshot references - n00by at work.

#4 @audrasjb
2 months ago

  • Keywords needs-patch added; needs-design removed

Hi,

Thanks for ticket. I can confirm the issue, this is quite uncomfortable for writing documentation.

The issue could be fixed quite easily, just need to remove this CSS rule:

.helphub-page .entry-content section .container .wp-block-image {
    overflow: hidden;
}

Cheers,
Jb

@audrasjb
2 months ago

Patch directly made on the file, since HelpHub repo is not synchronized.

#5 @audrasjb
2 months ago

So,

We need to remove this CSS rule:

.helphub-page .entry-content section .container .wp-block-image {
    overflow: hidden;
}

from https://wordpress.org/support/wp-content/themes/pub/wporg-support/sass/site/_helphub.scss

But it doesn’t exists on GitHub file: https://github.com/WordPress/HelpHub/blob/master/themes/wporg-support/sass/site/_helphub.scss

I added a patch, above this comment.

Cheers,
Jb

Note: See TracTickets for help on using tickets.