Layouts are all messed up! Also, z-index behavior change

[bobbybosler]

Hello, I upgraded to Pro 6.0.1 and it majorly messed up two of my single post layout assignments. One of them completely disappeared, poof, though thankfully I had a partial backup of that one, though I am having to rebuild part of it from scratch. No bueno.

In addition, something is seriously wrong with my “Video Post” layout I created. It’s as if the CSS is not coming through to the front end at all. You can see a front end example here: https://www.theegeneration.org/all-burned-in/. Most of my CSS is in element CSS, but it’s as if the whole page’s CSS is broken. If you have any pointers, they would be greatly appreciated.

Also, one thing I noticed is that for some reason, Cornerstone handles z-index stacking contexts differently than they did before in relation to background layers. I had some background layers that were not showing up, and the only way I could get them to show was by changing the z-index from auto to 0 in the page builder. It didn’t do it for everything; just two places on my site.

[charlie]

If you could post access to your site in a secure note that would be great for us to see these issues. Apologies for the inconvenience. That post in particular looks like it’s loading in the wordpress default template or a layout not picking up as a condition, but I’d have to take a look. I have noted the z-index issue, which page was this happening on? Thanks!

[bobbybosler]

@charlie,

I left the info in a secure note.

To clarify, the layout that “disappeared” (Audio Post Layout) still existed as a layout, but the Cornerstone content was blank. I replaced the content with the content of the “Test Audio Post Layout” that just so happened to still exist and made some modifications to bring it back to current.

Regarding the z-index issue, on the home page, if you navigate in the outline view to “Highlight Podcasts” section and then inspect the “Hero Post BG” Row, you will see that I changed the z-index field to 0, whereas before it was auto. If you change the field to auto the background layers disappear. I think this has to do with CSS stacking contexts, but I’m not sure why it changed. The same thing is also present in one other place, but it appeared to be the same issue and fix, so let me know if you want that info.

[charlie]

For the CSS issues, it looks like the media query prefers-color-scheme:dark is not triggering. Your CSS is being applied to the page. Are you controlling the prefers-color-scheme:dark elsewhere?
For the z-index issue a lot of our templates do the same thing by changing the background z index so I think this might be needed. I’ll have to bring both of these sites into my local and test some more. Thanks.

[bobbybosler]

The prefers-color-scheme:dark is only one small portion of the CSS that should be applied to the page. If you open the “Video Post Layout” in Cornerstone, you will see how it is supposed to be rendered. For some reason, the CSS that appears in Cornerstone isn’t making it to the front end.

[charlie]

Okay well I think we are getting closer, the CSS is on the page just not being applied. Just to double check are you getting an errors on that page with WP_DEBUG turned on?

[bobbybosler]

Not that I can see. I have the following in my wp_config.php file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );

[ruenel]

Hello @bobbybosler,

I have checked your page and I found out that you are using a custom layout. The Row element’s Template Layout is using custom calc(100% - 426px) 426px while the Global Container is using calc(100% - 80px). You may need to use vw unit instead of the percentage.

You can switch for the default 3/4 1/4 setting and see how it behaves.

Kindly let us know how it goes.

[bobbybosler]

Hey @ruenel,

Thanks, and there may be an issue there on row layout (though it worked fine before updating), but I think that you are missing the point. NONE of my CSS is being applied to the page on the front end. None of it at all.

For example, this is how my page appears in Cornerstone:

And here is how it appears on the front end. Notice the avatar, the headings, the hashtags, the thumbnails, etc are all unstyled.

[ruenel]

Hey @bobbybosler,

The issue seems to be coming from this calc(400px + 27vw) calc(100% - calc(400px + 27vw)) in the Row Element’s Layout Template setting.

If you select other layout, it displays correctly:

There could be other ways to set the column widths without having to use the complex calc() function. Temporarily change it to something simpler while we are troubleshooting.

Cheers.

[bobbybosler]

@ruenel,

Gotcha, so it is a bug with the calc() statements. I’ve changed the row layouts to 75% 25% for the time being, but I’d really like to change it back once you get that bug fixed. Keep me posted.

[christian]

Hey @bobbybosler,

Thanks for understanding. I confirm it’s something in with the space or characters inside the calc

This has been posted in our issue tracker to be queued for further investigation by our development team.

[charlie]

This will be added in 6.0.3. You can’t have a calc inside a calc (which we are using internally for determining things with the gap). Technically you’ll be able to use it without typing in calc (IE 400px + 50px will work the same as wrapping in a calc). Give it a try when it comes out and let us know if you have any issues.

[bobbybosler]

Okay, to follow up with this. It appears to be working now on 6.0.3 with some minor modifications.

Here are my final custom column sizes:

L: calc(400px + 27vw) calc(100% - (400px + 27vw))
XL: calc(100% - 426px) 426px

The tricky part was the L size. I’m not sure whether it’s standard CSS or Themeco magic (I haven’t taken time to investigate), but putting parentheses inside of the calc() allowed me to calculate my sizes like I wanted to without putting a calc() inside of a calc(). I’m not sure if that’s what you were saying in your post or not, @charlie .

[bobbybosler]

As a followup to this, TIL that nesting in calc() never requires the “calc”.

[ruenel]

Hey @bobbybosler,

Thanks for sharing that information.

Cheers.