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

/* || General Styling */

body {
  background-color: black;
  color: white;
  font-size: 18px;
  margin: 2% 0;
}

h1 {

marklchaves

Font Size Previewer II (Comparison Version)

A Pen by mark on CodePen.

License.

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

Hi,

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

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

Reply to multiple logos for different pages on the Avada community forum

Original thread.

Hello @paulstartups,

Thanks for another A2A! I thought the new Avada Theme Builder would support this! Unfortunately, I didn't find it anywhere in the Avada docs.

So, here's how I've done it in the past. It still works for Avada 6.2.2.