Skip to content

Instantly share code, notes, and snippets.

@ndiego
Last active December 14, 2022 13:51
Show Gist options
  • Save ndiego/b36a5859b38c52b100a83e9382f30c30 to your computer and use it in GitHub Desktop.
Save ndiego/b36a5859b38c52b100a83e9382f30c30 to your computer and use it in GitHub Desktop.
Columns, Groups, Rows, and Stacks: Code Examples
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' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment