Columns not working properly on live site

Description:

There has been a problem since I updated Cwicly, and that’s when I use columns. I have a column on my sites product page, but for some reason, on the live site, the column is not a column, it’s a row.

I have attached screenshots to this thread so you can see what I mean.

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. Insert a columns element with two columns, the first column bigger than the second column
  3. Publish the page and visit the page on the live site

I’m not 100% sure if this will work for everyone because at the minute, I’m assuming it’s a bug but I could be incorrect about that.

Screenshots, screen recording, code snippet

Environment info

  • WordPress version: 6.2
  • Gutenberg Plugin version: - N/A
  • Cwicly Plugin version: 1.2.9
  • Cwicly Theme version: 1.0.3

Hi @ItzJosh241,

Welcome to the community! :slight_smile:

Sorry to hear you’re experiencing trouble with the Columns block.
Unfortunately I haven’t been able to reproduce this issue on my end.

Could you possible provide me with the frontend link so I may take a look?
Thank you in advance.

Hello,

Thanks so much for responding, and thanks for welcoming me to the Cwicly community.

I can indeed send you the link to the frontend: https://caasin.com.

I look forward to hearing back from you! :slight_smile:

1 Like

Hello,

The page specifically with the error is: https://caasin.com/products/mens-essential-t-shirt/

Thanks again! :blush:

1 Like

@ItzJosh241, Strangely, on the front-end there is no layout being applied to the columns at all - no grid or flexbox.

I noticed that, but of course, on the backend, it is being applied but on the frontend, as you said, strangely isn’t applying a grid or flexbox.

I am able replicate this issue in the latest Cwicly - when previewing before saving. Perhaps this could be related to another issue we have been having.

As soon as I saved the page, the column layout suddenly appeared on the front-end, I am not sure of the exact cause but that was my experience of it.

@ItzJosh241, can you possibly try changing the row / column gap values and resaving the page and see what happens?

@Araminta, @Louis

Steps to repeat:

  1. Add a Columns block (with 2 columns) to a page
  2. Add an image to the left column
  3. Add a heading and a paragraph to the right column
  4. Preview the page (Columns are displayed wraps as blocks)
  5. Save the page
  6. Preview the page (Columns are displayed correctly side-by-side)

This may or may not be triggered by the same cause as what @ItzJosh241 is experiencing, but perhaps it will help.

Hi @StrangeTech,

I appreciate you helping with this.

I do not recommend using the preview feature as it will not be using the latest up-to-date CSS styles (this would require generation of a specific stylesheet for every preview you want to make).

@ItzJosh241, would it be possible for me to quickly take a look at this on your backend if possible?
Thanks in advance.

Thank you for the clarification @Louis.

As the Preview feature is a core WordPress feature that many people likely use without thinking about it, this is information that a lot of users will benefit from knowing about.

Perhaps a disclaimer in the documentation or a popup on first use with Cwicly installed?

If not using the Preview button, with Cwicly, what is the recommended approach for previewing new development changes on a live site prior to publishing?

Hi @StrangeTech,

This is a good point, thanks for bringing it up. We’ll make sure a notice is added with the preview generation.

The preview should be properly generated when modifying content. The only current issue is when you have made style changes to the specific post/template/global classes etc… they won’t be reflected in the preview.
Do you often use the preview when having made a style change? What added benefit does it give you over the backend view?

I appreciate your input @StrangeTech.

Hello,

I’m not actually having this issue anymore since switching my hosting provider to Hostinger.

1 Like

Thank you @Louis. This answers the question for now, my query was more in response to:

I thought perhaps there was an alternative approach that we were missing out on.

With regards to:

There are a few instances where dynamic content is not yet rendered in the editor (e.g. dynamic excerpts), so this is one reason it can be useful to preview a page.

2 Likes