Introduced three columns style and page requires a refresh

[paladin884]

Hi again,

While working on my new theme I'm seeing something very weird and I'm trying to understand how to fix it. For some reason if I've changed the main layout from one column to three columns, unfortunately, the new div(s) won't show up unless hit the page refresh one more time.

For example, if I click away to a different page the layout is back to one column but if I refresh the page will display the three columns. If I go back to the home page again is back to one column but if I refresh once more is back to three columns.

Any reason why all of this is happening?

Thanks a lot!

[PitaJ]

Screenshots please. If possible share your templates as well

[paladin884]

@pitaj

On first page load I get to see it like this

If I refresh the page I get to see the new layout

Code changes

No matter on what page I go I will always have to refresh the page one more time after the first http request. It make me think that some javascript doesn't like me changing the backbone of the theme.

[paladin884]

This is how the DOM looks like when loads the first time

This is how the DOM looks like if I refresh the browser page

Something somewhere it renders the previous layout on initial http request and the new layout on page refresh...

I'm using QuickStart theme as a start

I wonder if this is because I'm working in a child theme...

[PitaJ]

The innerHTML of <div id="content"> is replaced entirely with the results of the ajaxify operation, so it's replacing your columns with the new page content.

You should put your columns outside that element.

[paladin884]

@pitaj that's it! Oh gosh, I literally couldn't see the connection of that ID. But now it all makes sense.

Thank you!