WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 14 months ago

#46315 new defect (bug)

Block editor columns left margin issue on reduced screen width

Reported by: ScalarEnt Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0
Component: General Keywords:
Focuses: Cc:

Description

Hi,

I noticed a problem when using columns and reducing the screen width below about 768px the child columns still have a left margin (32px) included which means they are offset from the first instance. This has been evident in all versions of the block editor so far and is still there in 5.1.

See image attached.

Steve

Attachments (3)

block-editor-columns-offset.jpg (46.2 KB) - added by ScalarEnt 14 months ago.
screenshot showing offset of columns 2 and 3 on small screen due to unwanted left margin
3-col-alignment.png (171.6 KB) - added by subrataemfluence 14 months ago.
3-col-image-non-responsive.png (206.7 KB) - added by subrataemfluence 14 months ago.

Download all attachments as: .zip

Change History (10)

@ScalarEnt
14 months ago

screenshot showing offset of columns 2 and 3 on small screen due to unwanted left margin

#1 @subrataemfluence
14 months ago

Welcome to trac!

I tried but could not reproduce the issue with twentyseventeen theme activated. Please see attached screenshot 3-col-alignment.png

However, I encountered something else! When I switch to responsive view (Chrome on Ubunty 14.04 LTS), the images in columns rather than being responsive, they are getting cut and filling up the entire view port. Please see attached screenshot 3-col-image-non-responsive.png.

Theme is still twentyseventeen.

#2 @ScalarEnt
14 months ago

Hi,

Just checked again and the problem looks like a media query issue - it occurs between about 568px and 768px width.

Here is my test site so you can see the problem - http://176.32.230.50/scalar-wp-dev6.co.uk/gutenberg-test-page-3/. This site uses Customizr theme.

I know another developer that is seeing the same problem on a live site.

Best regards

Steve

#3 @subrataemfluence
14 months ago

Would you mind checking whether the issue still persists with a bundled theme like twentyseventeen or twentynineteen?

#4 @ScalarEnt
14 months ago

It does the same in twentyseventeen but not in twentynineteen.

#5 @subrataemfluence
14 months ago

Thank you so much for checking!
With twentyseventeen I have no issue. I will test more and get back to you asap.

#6 @ScalarEnt
14 months ago

  • Summary changed from Bock editor columns left margin issue on reduced screen width to Block editor columns left margin issue on reduced screen width

#7 @pento
14 months ago

  • Version changed from 5.1 to 5.0
Note: See TracTickets for help on using tickets.