Sage Layout Bug

sage
1

Hello all,

Fairly new to using Sage and Wordpress theme development as a whole. I’ve been messing around using Tachyons to get the hang of building things using Sage. Recently, an interesting bug came up.

18%20PM
18%20PM1788×1490 352 KB

This code is supposed to create a full screen block with the text “Test Test, Testing Out Wp” in the center vertically, but for some reason, no heights or any kind of sizing seem to work, the layout defaults to this:
30%20PM
30%20PM3302×1802 202 KB

The only way to remedy this is by adding some sort of character outside of the @section code, but as you can guess, this is not an ideal solution. Any guidance would be appreciated!

2

This is how it is supposed to look.

51%20PM
51%20PM3302×1800 136 KB

3

Have you run yarn build to generate your CSS?

4

Yes, same result as the attached screenshot. I’m at a loss as to what could be causing this.

5

Have you been able to get styles to work at all so far, or did it suddenly stop work?

Can you describe your setup? (i.e. OS, Node version, local development environment, etc.)

Are the classes in the markup when you inspect the page? Also, could there be an unclosed HTML tag somewhere?

Are there errors in the browser console? What happens when you try to inspect the stylesheet after yarn build?