Page layout breaking

Support
#1

I’m building a page with Cornestone, it’s a page with around 50 rows of 4 columns each with multiple elements in each column. It’s showing locations for a company. So I create 1 row how I want and duplicate it then change the content necessary. The problem is at some point (seems random) the layout of the page breaks and I see cornerstone shortcodes on the screen.

I’ll put the URL below for you to see.

https://rrsa.us/locations-test/

The original page for this, if I add another element it will break the layout of the page where I add the new element. If I then remove that element, the formatting goes back to being correct. So I can’t add anything to this page without the layout breaking as soon as I do.

that link is here:
https://rrsa.us/locations/

I’ve disabled all plugins and it has had no impact on it.
I also increased the memory limit to see if that would help but it doesn’t. I added
define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
define( ‘WP_MAX_MEMORY_LIMIT’, ‘512M’ );

Above the line: /* That’s all, stop editing! Happy blogging. */

Really scratching my head. It’s as if you can only have so many elements on a page.

John

#2

Hi John,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

#3

I think I did that right, added a secure note to my original post

#4

Hello There,

I have checked the page and there seems nothing wrong when viewed in Cornerstone editor. I just can’t figure out why it display odd in the live page.

I went ahead and check each column and I found out that the very first section has an empty column. I added a gap element just to make the column filled, saved the changes and bam, the issue is resolved. To prevent it from happening again, please do not left any container blank. A section must have a row, a row must have a column and a column must not be empty. You will have to remove the section if is is not necessary.

Hope this explains it.

#5

Looks like I broke it again.
I see what you did adding the gap element. But I went back to that page and I duplicated the row with location information in it to put under another state. In doing so, the page is back to what it was before with a bunch of short codes and broke layout.

In Cornerstone, on that page, under Layout, I expanded Section 2 and went to the row and clicked on the duplicate icon. Then Moved that row into place, then duplicated it, moved into place, etc. So every section has rows, every row has columns, and every column has content in it but the problem still exists.

#6

Hello There,

I have re saved the page again and it is gone. It is showing this:

Please clear your browser cache first before testing back your site. Please use private browsing mode instead while editing the page and see how it goes.

Hope this helps.

#7

I don’t think you understand the issue. You removed the “bad” rows again and it looks like your screen shot, yes.

I duplicated the numbered rows and moved 1 under each state row. Doing this has broken the layout again, like it has the last several times. Please look at that page again. Then when you delete the “bad” rows, duplicate the numbered locations row and move them into place for the rest of the states.

The whole idea here is a state is listed in 1 row. Then the next row has 4 columns for locations in that state. Deleting the rows that are breaking the code does not fix the problem.

I’m also attaching 2 screen shots because this goes back to the issue on the actual locations page on this website, not just the test one you’ve been editing. On the locations page if I add another element, it breaks the website at that point.

This screen shot shows what it looks like at New Jersey…

This screen shot is taken for New Jersey AFTER I added another button. It breaks the entire layout of the page.

Now after the code is broken, if I simply remove the “bad” element, in this case the button I added, everything goes back to normal.

I’m doing all of this from a computer I’ve never accesses this website before, in a private window so there’s no possibility that anything cached this time.

#8

And yes the crazy thing is it looks completely fine within the Cornerstone preview but the live page is all broken to pieces.

#9

Hi there,

That usually happens when your content as broken HTML. It works okay in cornerstone since the builder is able to capture the content one at a time (isolated from other element previews). The best way to troubleshoot is using this online tools

https://validator.w3.org/

Just paste in the live page URL and hit check. Then check the errors related to stray (no open or no closing tags), then compare it to your existing content and you’ll the problem. These are the sample of broken content

`

Hello there

`

`

Some text

`

There is no </font> or <div>

Thanks!

#10

So what you’re saying is Cornerstone is writing invalid HTML code breaking my site and you don’t have a way to fix it?

Because all I’m doing is using the Cornerstone elements. How do I change the HTML code on a button so it doesn’t break my site when I add a new button to the page?

#11

Hi there,

No, broken elements are only added by users who composed it ( I’m not referring to cornerstone elements, but HTML element, a code ). As I’m saying the elements preview are isolating each element content from one another which is why it appears okay in the builder. And it the live page, your broken content affects all other elements of the entire page. If cornerstone is causing this broken HTML, then you should see it in the preview first hand. But what I provided is just a recommendation for troubleshooting to see if there are broken elements.

I did some thorough checking and there are no broken HTML elements (maybe it’s removed as I don’t see the same on your screenshots). And I’ve been trying to do the same procedures as you provided but I can’t reproduce what’s in your screenshots. And as for clarification, there are multiple issues right? The broken shortcodes below the page and the columns breaking when adding that image? Would you mind providing a video recording of how I can reproduce the issue like with your screenshot? What code you’re adding? I have no clue as I don’t see those logos on your page.

Thanks!

#12

Sure I’ll post links to the videos privately. I also tried replicating this on another X Theme site we manage and the same problems occur on that one as well.

#13

Hi there,

I can reproduce this now just on your site and seems the issue is originating from the template where it’s copied. Example, I duplicated the button saved it and the issue appears, then I removed the button again and it’s gone. So I tried it on my installation and there is no issue at all, then I decided to export your page content as a template and imported it into my installation, and the button that I deleted is still there.

I’d like to further to investigate but the loading process is too slow and sometimes it won’t load due to https (there are about 1,500 warnings about CORS issue). Let’s fix that first, please install a Better Search Replace plugin and replace all instances of http://rrsa.us/wp-content/ with https://rrsa.us/wp-content/ from all database tables. This is not to fix the main issue, but to make the testing much faster.

And for the meantime, please try recreating the content from scratch and try it again instead of pulling from the existing template. I’m not saying the issue is originating from there, but let’s narrow the possible causes.

Thanks!

#14

Ok I installed that plugin and changed all http references to https

I have recreated the page from scratch. That’s where the location-test pages originally came from. For the purpose of the video for you guys to watch I at that time created the template. Otherwise you guys would have been watching a 45 minute video of me adding everything piece by piece. So it’s not that.

On your local installation did you create the number of elements that mine has? 4 columns with each column having 2 images, 1 text element and 1 button?

Twice when creating new pages it broke at element 323. That seems a bit too coincidental when it happened on 2 different installs. Made it seem like Cornerstone is limited to so many elements or a PHP setting needs to be changed?

#15

Hello There,

Sorry for the delayed responded. I have taken several test on the page. I ended up duplicating your locations page into my “An X Test” page. I can confirmed that duplicating a button is causing the issue. It destroys the page upon duplication. I’ve submitted this to our issue tracker so the developers will be made aware of it. A fix will be released once our developers resolve the issue.

Meanwhile, please do not use duplicate feature to duplicate the button. Just create each button to be able to finish building your page.

Thank you for your understanding.

#16

I’m adding 2 more screen captures for you to look at. This is a bigger issue than just duplicating a button.

The first video I go back to that locations page and manually add another button and it breaks at that button again. I then add a text element in one of the columns near the top of the page, it does fine. So I add another row to the bottom of the page, add a text element into each column of that new row and the page breaks at that spot again showing shortcodes again.

The second video I make a new page, create a new section, row 1 is 1 column has a headline in it, row 2 is 4 columns and I put 2 images and 1 text element in each one. I then duplicate the section a bunch of times eventually breaking it, with no buttons being used at all.

This may be an issue with the duplication feature overall. I’m going to rebuild the locations page for my client 1 element at a time all the way through and screen cast it as well. If it too breaks, I’ll post it for you as well.

#17

I made a brand new page for this and added every element one at a time, didn’t duplicate anything at all and it eventually broke before I was done. I did a screen cast of this from start to finish. It’s about 1 hour and 16 minutes long. You can see how I start and then skip ahead to the last minute or two and you’ll see the outcome. I’m uploading the video right now to YouTube and will post in a secure note once it’s done uploading.

#18

Hello There,

I have save your page as a Cornerstone template and tested it over our local testing server. I have made a test using your page and I do not encounter any issues when duplicating a section, row, columns, text and button elements on my local testing server. I do experienced that my local testing server is getting slower and slower while adding more and more elements.

Could you please create a staging server so that we can differentiate how the theme’s performance in your current server. I am suspecting that this has to do with your server, the file size of the entire page and the time limit in executing the editor.

To know how to create a staging area, please check out these articles:


Thanks.

#19

Ok I just did that. Installed AMPPS on my MacBook pro, installed a fresh copy of Wordpress and added X Theme, made 1 page, setup the section like my client’s site and then started duplicating everything.

Yes it moves much faster on the local machine. I created the section then I duplicated it. Saved. Viewed. And kept doing this. By the time I got to my 18th section it broke. The exact same thing it’s been doing showing shortcodes on the page but within Cornerstone everything looks just fine.

I removed a couple sections and manually added them back and it again broke on section 18.
Each section has 2 rows. The first row has 1 column with 1 element in it. The second row within each section has 4 columns, each column with 2 images, 1 text element and 1 button.

I don’t have the screen cast software on this computer but can do this back at my office when I’m in next if you want to see a video of it.

If this is server related, I have to believe it’s a memory issue??? It can’t be a timeout or execution time issue because on my local machine it’s nearly instantaneous when I click save.

AMPPS is running on all the default values with PHP 5.6
If you want me to increase something let me know and I’ll try.

#20

Is there a limit to how many elements can be on a page?

I noticed yesterday it was breaking on element ID 323 both on this website and another running x theme. And then on my local machine it broke with section 18. Each section had 18 elements in them. 18*18 is 324.

Right now on that locations page there are 312 elements and it’s breaking when you add another button, sometimes breaking when you add a different element.

The common theme here though is breaking once you have 312-324 elements on the page.