Hey creativeopole,

That is a WordPress core problem and will be fixed in the next update. Please try this in your functions.php file for a temporary fix:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hi,

Thanks for the update. The sorting problem is due to a bug in WordPress core, please try this in your functions.php file until WordPress 5.9.1 has been released:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Please refer to this thread to fix the extra word problem: https://kriesi.at/support/topic/gallery-and-page-title-bug/

Best regards,
Rikard

Hey mediatom,

Please try this in your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hey Michael,

Thank you for the inquiry.

You can use this css code to adjust the style of the icon in the iconbox element.

#top .iconbox.av-no-box .iconbox_icon {
    top: 0;
    margin: 0 auto 20px auto;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 50px;
}

The actual size of the icon is controlled using the font-size property.

Best regards,
Ismael

Hi Ryan,

I edited your element and gave it “custom-social” ID in Advanced > Developer Settings and then added following cdoe to bottom of Quick CSS field in Enfold theme options > General Styling tab

/* Social widget */ 
#custom-social .avia-related-tooltip {
  display: none !important;
}
#custom-social .av-share-box ul li a { 
   font-size: 18px; 
   width: 35px;
}
#custom-social .av-share-box ul li {
   display: inline-block; 
}
#top #custom-social .av-share-box ul { 
    display: flex; 
} 
#custom-social .av-share-box ul li.av-social-link-pinterest { 
   order: 4; 
}
#custom-social .av-share-box ul li.av-social-link-linkedin { 
   order: 3; 
}

Best regards,
Yigit

Hi,

Please try this in your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hi,
You would need to make your adjustments in HTML, such as shown on the Getting Started page

and add your Navigation Parameters to the initialize script

For this example I used the Infinite loop with slides per group because it seems to be the closest to what you want.
So first we need to import the core Swiper JS & CSS files and set the initialize script in our child theme functions.php file in Appearance ▸ Editor:

function Swiper_from_CDN(){
    ?>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 <script>
	 window.addEventListener('DOMContentLoaded', function() {
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
		  });
    </script>
    <?php
    }
add_action('wp_head', 'Swiper_from_CDN');

Then on our test page in a code block element add this code:

<style>
.swiper {
        width: 100%;
        height: 100vh;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
</style>   

 <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

the expected results should be:

I linked to my working example below, so this should help you get started, you will still need to add your images, a little more css for style and any other parameters you wanted.

Best regards,
Mike

Hey,

Thanks for contacting us!

Masonry Load More issue is related to Enfold but Gallery issue is related to WordPress.

To fix load more issue, please go to Appearance > Editor and replace enfold/config-templatebuilder/avia-shortcodes/masonry_entries with – https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_9/templatebuilder/masonry_entries.php
Then replace enfold/config-templatebuilder/avia-shortcodes/masonry_gallery with – https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_9/templatebuilder/masonry_gallery.php

To fix gallery sorting issue, please add following code to bottom of Functions.php file

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Regards,
Yigit

Hi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.avia-timeline .milestone_icon {
    height: 60px !important; 
    width: 60px !important; 
    line-height: 60px !important; 
}
.avia-timeline .milestone_icon i {
font-size: 50px !important;
}

After applying the css, please clear your browser cache and check.
If this doesn’t help then remove it and link to your page when we can examine it closer.

Best regards,
Mike

Hi,
Glad to hear, to adjust the text try this css:

#main .main_color .avia_textblock td .p1 {
    margin: 0;
    line-height: 20px;
    font-size: 18px;
    color: #000;
}

To remove the extra padding & margin from the images above to tighten it up, try this css:

#main .main_color .avia_textblock td img {
	margin: auto;
	padding: 0;
}
#main .main_color .avia_textblock tr:nth-child(1) td {
	padding: 0;
}

Please see the screenshot in the Private Content area of the expected results.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey flordelizamejia,

Please try adding this to your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hey lauragrashoff,

Thanks for the login details. The space seems to be working fine on my end when I checked a Special Heading and Text Block element, where exactly are you seeing this problem?

Please try this in your functions.php file to fix the image reordering problem:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hi Markus,

Thanks for the update.

1. Are you looking to make changes which will apply to your whole site? If so, then please do them under Enfold->General Styling->Typography. If you want to target that heading only, then please try this in Quick CSS:

.home #av-layout-grid-1 h1.av-special-heading-tag {
    font-size: 54px;
}

@media only screen and (max-width: 767px) {
.home #av-layout-grid-1 h1.av-special-heading-tag {
    font-size: 20px;
}
}

2. Please try this CSS as well:

.home #av-layout-grid-1 .avia_iconbox_title {
    font-size: 20px;
}

3. Could you try to add a Separator/Whitespace element inside of the right cell? That should make it larger in mobile.

Best regards,
Rikard