Flexbox – the same columns height

Make Bootstrap Columns All the Same Height

HTML:

<div class="container">
<div class="row is-flex">
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 1</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 2</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Ttitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a class="btn btn-primary" href="#">Link 3</a></div>
</div>
</div>
</div>

CSS:

.row.is-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

Solution 2 using table

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

More Different Tricks on How to Make Bootstrap Columns All the Same Height: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Horizontal full width menu

Add a horizontal menu displaying on the full container width.

HTML and WordPress menu function:

CSS code:

ul#horizontal-menu-list {
	display: table;
	width: 100%;
	padding: 60px 0;
	margin-left: 0;
}
ul#horizontal-menu-list li {
	display: table-cell;
}
ul#horizontal-menu-list li:first-child a {
	text-align: left;
}
ul#horizontal-menu-list a {
	display: block;
	border: 0;
	text-align: center;
	margin: 0 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #777;
}

Set the same boxes height on page

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);

Retina Display Media Query

Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):

// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

   .spritesheet,
    #faqs-accordion button.accordion h3::after {
        content: '' !important;
	background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
	background-size: 800px !important;
    }
    #faqs-accordion button.button-bg:after {
        content: '' !important;
        background: url(../images/menu-items-bg@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;        
    }
    #faqs-accordion button.accordion:hover:after,
    #faqs-accordion button.accordion:focus:after {
        content: '' !important;
        background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;
    }    
}

Advanced Custom Field custom field to select one or many Gravity Forms

This is a WP Advanced Custom Field plugin custom field to select one or many Gravity Forms. This provides a field that lets you select from a list of active Gravity Forms https://github.com/stormuk/Gravity-Forms-ACF-Field

Installation

This add-on can be treated as both a WP plugin and a theme include.

Plugin 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your plugins folder 2. Activate the plugin via the Plugins admin page

Include 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your theme folder (can use sub folders). You can place the folder anywhere inside the ‘wp-content’ directory 2. Edit your functions.php file and add the code below (Make sure the path is correct to include the acf-gravity_forms.php file)

include_once('acf-gravity_forms.php');

Using the field

The field lets you pick one or many fields.

The data returned is either a Form object, an array of Form objects or false if an error occurred.

If you have selected a single form and you want to display the form on the page, you can use:

<?php 
    $form_object = get_field('your_form_field');
    gravity_form_enqueue_scripts($form_object['id'], true);
    gravity_form($form_object['id'], true, true, false, '', true, 1); 
?>

or

<?php 
    $form_object = get_field('your_form_field');
    echo do_shortcode('[gravityform id="' . $form_object['id'] . '" title="true" description="true" ajax="true"]');
?>

You can find out more about the gravity_form method to embed a form on a page in their documentation

If you are using the field to select multiple forms, you will have to iterate over the array. You can then use the form object as you like:

<?php
    $form_objects = get_field('your_forms');

    foreach($form_objects as $form){
        echo $form['title'];  
    }
?>

Custom Scrollbar (Always Showing)

Note: can be applied to general page
Note 2: If applied to specific element/container a position absolute may be necessary
CSS

p.customClass {
  overflow-y: scroll;
}

p.customClass::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

p.customClass::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(98, 93, 78, 0.75);
  border: 2px solid #eee;
}

p.customClass::-webkit-scrollbar-corner {
  background-color: transparent;
}