lizkaraffa

// Vanilla JS version (only use one)
// this will inject new style rules into the body of the page
// see: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
function injectIE11Grid(){
	var ieRules = '';
	var css = document.createElement('style');
	var head = document.head || document.getElementsByTagName('head');
	css.type = 'text/css';

	for ( var i=1; i <= document.querySelectorAll('.entry-content > *').length; i++){

lizkaraffa

/* Be sure to set these in your variables partial for this mixin to work
* $mobile_width
* $tablet_width
* $desktop_width
* $wpadmin_width
*/

@mixin media( $res ) {

	@if mobile == $res {

lizkaraffa

/* Unfortunately, Gutenberg keeps iterating through and changing their class names
* As of Aug 13, 2020 the following code works in the latest version of the Gutenberg PLUGIN
* See below to find the code that works for the latest version of Gutenberg baked into the latest version of WordPress
*/

/* Gutenberg Plugin Version */
.block-editor-block-list__layout {
	// Unfortunately, Gutenberg uses .block-editor-block-list__layout in all blocks too
	// We only want to target the main container where all blocks are direct children
	// Thus we need :first-of-type

lizkaraffa

/* This sets the alignment for all Gutenberg regular, wide and full width content in the Front End */

// Change .entry-content to whatever class wraps your content
.entry-content {
	@include gridSection();

	& > * {
		@include regularContentMaxWidth();

		&.alignwide {

lizkaraffa

@mixin gridSection {
	display: grid;
	grid-template-columns: $size__mobile-grid;

	@include media(tablet) {
		grid-template-columns: $size__tablet-grid;
	}

	@include media(desktop) {
		grid-template-columns: $size__desktop-grid;

lizkaraffa

$size__site-gutter-mobile: 20px;
$size__site-gutter-tablet: 50px;
$size__max-site-width: 1600px;

// Site Columns
$site__content-columns-mobile: 2;
$site__content-columns-tablet: 8;
$site__content-columns-desktop: 15;

// Grid Widths

lizkaraffa

<section class="tp-travel-time tp-block">
	<div class="tp-block__container--full">
		<h4 class="tp-travel-time__title">Travel Time to Next Destination</h4>
		<div class="tp-travel-time__meta">
			<span class="tp-travel-time__bike"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">20 minutes by bike</span></span>
			<span class="tp-travel-time__transit"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">14 mintues by <a href="#">transit</a></span></span>
		</div>
	</div>
</section>

lizkaraffa

//Why vw instead of percentage?
$columns: (
	1: calc(1 * (100vw / 12)),
	2: calc(2 * (100vw / 12)),
	3: calc(3 * (100vw / 12)),
	4: calc(4 * (100vw / 12)),
	5: calc(5 * (100vw / 12)),
	6: calc(6 * (100vw / 12)),
	7: calc(7 * (100vw / 12)),

lizkaraffa

/**
 * HB Niagara Ryla-WP Child Theme - v0.1.0 - 2018-01-30
 * https://zao.is
 *
 * Copyright (c) 2018;
 * Licensed GPLv2+
 */

window.HNC = window.HNC || {};

lizkaraffa

 <div class="light-wrapper">
    <div class="container inner2">
    <div class="hb-checkout col2 row">
          <div class="col-sm-8 hb-checkout-content">
              <div class="isotope row">
            <div class="step-1">
              <div class="date-selection">
                <div class="section-title">
                  <h2><?php _e( 'Next Steps:', 'hb-ryla-child-theme' ); ?></h2>
                  <h3><?php _e( 'Choose a date and Select Ticket Quantity.', 'hb-ryla-child-theme' ); ?></h3>