marklchaves

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

https://theme-fusion.com/forums/topic/css-for-making-fusion-slider-responsive/

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

/* 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

<!-- 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

// 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() {
        grid.fadeIn();

marklchaves

Answer to Avada Forum Post https://theme-fusion.com/forums/topic/fusion-slider-darken-an-image/

Just in case you don't find a Fusion Builder setting (doubt there is one). And, without seeing your page, here's an example that will work for the hero image on this page.

https://marklchaves.com/responsive-banner-hero-image-demo/

.hero {
  background-image: linear-gradient(
 rgba(0, 0, 0, 0.3),

marklchaves

Reply to Avada Froum Thread: Change Column Order on Mobile https://theme-fusion.com/forums/topic/change-columns-order-on-mobile

Thanks for sharing your code, Austern & Alex!

I've used CSS order properties with other themes, but not yet with Avada. Your posts gave me inspiration to refactor one of my Avada staggered layout designs as a test.

The code posted by Austern, then reposted by DFeick didn't work for me. I also wanted a mobile-first design.

Anyway, here's the CSS I came up with that worked for me. If anyone is interested.

marklchaves

<?php

/**
 * Kindly provided by @notebleu on the Avada Community Forum 
 * - https://theme-fusion.com/forums/topic/unnecessary-js-files-load-even-when-fusion-elements-disabled/#post-648617
 */
function custom_disable_avada_js() {
    Fusion_Dynamic_JS::deregister_script('avada-comments');
    Fusion_Dynamic_JS::deregister_script('avada-general-footer');
    Fusion_Dynamic_JS::deregister_script('avada-mobile-image-hover');

marklchaves

<?php

/**
 * Don't load Revolution Slider & Contact Form 7 plugins
 * if the page doesn't need them.
 */
function my_deregister_javascript() {
  if ( !is_page(YOURPAGEGOESHERE) ) {
    wp_deregister_script( 'jquery.themepunch.tools' );
    wp_dequeue_script( 'jquery.themepunch.tools' );

marklchaves

/**
 * This was a proof of concept for me to be able to 
 * retrieve an API key using a Netlify environment variable
 * using this lambda function. I spent a lot of time looking
 * for a complete example like this--without any luck.
 *
 * So, here's a step-by-step of what I did.
 * 
 * 1) For this function to work, define the env variable in
 * Netlify > Site > Build & Deploy > Environment > Edit Variables

marklchaves

<?php

/**
 * This function mutates all H2s to become H3s. Add
 * this to your child theme's functions.php file.
 * 
 * Change or add to this as needed. I.e., change the
 * target tag and replacement tag to whatever you want.
 *
 * Add more lines to remove more title tags, if you want.