Skip to content

Instantly share code, notes, and snippets.


mark l chaves marklchaves

View GitHub Profile
marklchaves / avada-equal-height-plain-columns.css
Created Oct 16, 2019
CSS Only Solution to Equal Height Columns in Avada by ThemeFusion (two plain columns with buttons)
View avada-equal-height-plain-columns.css
/* For Avada by ThemeFusion */
/* The equal height problem is only an issue for larger devices. */
@media screen and (min-width: 1024px) {
/* Make the column content equal height. */
.your-classname-here .fusion-column-wrapper {
height: 440px !important; /* Adjust for your content. */
/* These CSS selectors depend on what Avada buttons you use. Note the button-2 class--change as needed. */
.fusion-button.button-flat.button-small.button-default.button-2.fusion-button-default-span.fusion-button-default-type {
marklchaves / minimal-mistakes-responsive-snippet-page__hero.html
Created Nov 8, 2019
First Attempt to Support Art Direction Mobile First Images on Minimal Mistakes Jekyll Theme
View minimal-mistakes-responsive-snippet-page__hero.html
<!-- Process the Hero Image -->
{% if page.header.overlay_image_mob %}
{% if page.header.overlay_image_mob
contains "://" %}
{% capture overlay_img_mob_path %}{{ page.header.overlay_image }}{% endcapture %}
{% elsif page.header.overlay_image_mob %}
{% capture overlay_img_mob_path %}{{ page.header.overlay_image_mob | relative_url }}{% endcapture %}
{% endif %}
{% else %}
marklchaves / caughtmyeye-dev-portfolio-masonry.js
Created Nov 8, 2019
Modified On Load JavaScript Code from kfrankc's Customisations of the Minimal Mistakes Jekyll Theme
View caughtmyeye-dev-portfolio-masonry.js
// Refactored to support on load and resize calls. ~mlc
function loadMasonry() {
// console.log("Inside portfolio-masonry.js");
var grid = $('.grid__item');
var container = document.querySelector('.archive');
// Get reference to loading screen
var loading_screen = document.getElementById('loading');
imagesLoaded(container, function() {
marklchaves /
Created Nov 26, 2019
Darkening a Background Image CSS Only
marklchaves / javascript-exercise-changing-html-on-the-fly.css
Last active Jan 1, 2020
JavaScript Exercise: Changing HTML on the Fly
View javascript-exercise-changing-html-on-the-fly.css
/* || General Styling */
body {
background-color: black;
color: white;
font-size: 18px;
margin: 2% 0;
h1 {
marklchaves / font-size-previewer-ii-comparison-version.markdown
Last active Jan 19, 2020
Font Size Previewer II (Comparison Version)
View font-size-previewer-ii-comparison-version.markdown
marklchaves /
Last active Mar 7, 2020
Response to, "CSS for making Fusion Slider responsive"

Reply to this thread that is not letting me re-post my edited response.

Hi @kabrosidigital and @esd112,

Can you provide some visual examples? Responsive, has a few meanings out there (it's an overused term). By default Avada is responsive. Meaning it will scale content appropriately (responsively) to different device screens and resolutions.

You can see this clearly by viewing all Avada demos on multiple devices (alluding to Michael's example).

marklchaves /
Created Mar 26, 2020
Reply to Avada Form "Author Information Alignment"


This is a common anti-pattern.

I recommend the following:

  1. Copy your row that has the two columns.
  2. In the new copy, label it something like "Mobile View" in the FB back-end editor.
  3. In this new row, put all elements into their own 1/1 column. That means that image needs to be on its own.
  4. Delete your original two 1/2 cols. They should be empty now, right?
marklchaves / generatepress-child-functions.php
Last active Apr 5, 2020
Using GeneratePress Built-in Hooks for Customising how Individual Blog Posts are Layed Out on a Blog Index or Homepage
View generatepress-child-functions.php
* GeneratePress child theme functions and definitions.
* Add your custom PHP in this file.
* Only edit this file if you have direct access to it on your server (to fix errors if they happen).
function generatepress_child_enqueue_scripts() {
if ( is_rtl() ) {
marklchaves / avada-make-read-more-symbol-into-icon.css
Last active Apr 7, 2020
How to change the Read More text in Avada ThemeFusion blog post teasers.
View avada-make-read-more-symbol-into-icon.css
/* Make a Coffee Cup be the read more symbol. */
.fusion-blog-shortcode .fusion-read-more::after {
content: '\002615' !important; /* Hot Beverage */
right: -20px !important;
* How to add CSS to Wordpress.