WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 5 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 5 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 5 months ago.
3-col-image-non-responsive.png (206.7 KB) - added by subrataemfluence 5 months ago.

Download all attachments as: .zip

Change History (10)

@ScalarEnt
5 months ago

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

#1 @subrataemfluence
5 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
5 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
5 months ago

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

#4 @ScalarEnt
5 months ago

It does the same in twentyseventeen but not in twentynineteen.

#5 @subrataemfluence
5 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
5 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
5 months ago

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