Columns, Groups, Rows, and Stacks: Code Examples

builder-basics-code-examples.txt

Add the following to the style.css file of the theme.
-------------------------------------------------------------------------------------

// Make the block sticky.
.sticky-column-content {
    position: sticky;
    top: 60px;
}

// Justify the space between all internal blocks. Add to Stack blocks.
.is-content-justification-space-between {
    justify-content: space-between;
}

// Reverse the direction of columns on mobile. Add to Columns blocks.
@media (max-width: 782px) {
    .mobile-reverse-column-direction {
        flex-direction: column-reverse;
    }
}

// A little tweak to ensure dimensions are calculated consistently. 
body * {
    box-sizing: border-box;
}



Add the following to the functions.php file of the theme. 
(If the theme does not have one (like Twenty Twenty-Three), you will need to add it)
-------------------------------------------------------------------------------------

<?php

// Enqueue stylesheet.
function tt3_enqueue_stylesheet() {
	wp_enqueue_style( 'tt3-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'tt3_enqueue_stylesheet' );

// Enqueue editor styles.
function tt3_theme_setup() {
	add_editor_style( array( './style.css' ) );
}
add_action( 'after_setup_theme', 'tt3_theme_setup' );