Columns object truncated in Editor

Description:

Template part for header uses 2 columns with left column holding image and left column navigation. In the editor the columns WYSIWYG view is truncated on the left. The columns look fine on Themer thumbnail and on frontend. See screenshot for the details.

Step-by-step reproduction instructions:

  1. Open Themer
  2. Create part for header
  3. Add Columns Block with two columns (left small, right long)
  4. Add image block to left column and navigation block to right column

Truncation happening in Block editor


View screenshot (link below) for 1000 words illustration :wink:

Screenshot with more details

Environment info

  • WordPress version: 6.2.1
  • Cwicly Plugin version: 1.2.9.5.8.4
  • Cwicly Theme version: 1.0.3

Have you screenshots of both the backend and frontend without any illustrations? I can’t make out what your issue is. Higher res would help as well.

Thank you for your interest.

I use snagit and screencast. Screencast provides support for zooming. Zoom options appear on hover. A desktop is the best media to use for troubleshooting. But, if you are looking on a mobile the zoom options appear on touch too.

Hi @Anthony,

Sorry to hear you’re experiencing trouble with this.

Unfortunately, I haven’t been able to reproduce this error on my end.

Could you possibly let me know if you are applying your border radius to the Column or Columns block?
Additionally, if you could share a frontend link to this page, I might be able to better see what’s going wrong.

Thank you in advance.

Hi @Araminta,

Thanks for your interest. Please don’t worry about me. The design looks good and no real problem for me. I am reporting it since I know it is not something you wish to have happening.

Since you are interested in investigating further, I’m happy to give you an administrator account and you can use it as you wish. Feel free to play around as you wish as this is in a beginning stage and I will just reset it before going on further.

I am creating an admin account called Araminta, but need an email address to use. Also, I have a privacy block on the site right now, so I need to email you the details for that.

What shall I use for your email address? If you would rather not post it here, you can reach me at my client email address. My full name is Anthony Tilke.

All the best!

1 Like

@Araminta I sent you a DM with some access details

:upside_down_face: did not occur to me earlier to use discourse messaging.

1 Like

Once again thank you for the temporary access, @Anthony!

In fact, what you are reporting isn’t a bug, but inconsistency in the image’s display between the backend and frontend.
On the backend, Gutenberg automatically adds an auto width, which makes the image take the full width of your column’s block, thus hiding its rounded border.
As this auto width doesn’t apply on the frontend, the image takes up more space than its containing block, which explains why your column’s rounded border is visible.

I would suggest to set your image’s width to auto and add some padding to its containing column block.

Please let me know if this helps!

Thanks very much for working on this with me @Araminta. I am using an SVG and set it to the actual dimensions used of 180x60 and then removed height and width settings from columns and all child blocks. This worked in providing the desired design view in the backend.

Then I took a look at the frontend to find that now the front end was truncated :exploding_head:

A solution I then found that worked to provide the desired design view on both front and back ends was to add padding-left to the image. :triumph: (nb. I tried other things first, like alignments without success).

All good now. Just another battle with minor problems.

1 Like

I was preparing a new header design in anticipation of MEGA MENU. Your timing was great :clap:

Now I can go on to the next stage of adding the new menu features.

1 Like

Glad to hear you managed to sort it out, @Anthony!

Please don’t hesitate to let me know if you have any other questions.