Hi,
To change the number of grid columns on a archive page, such as categories, edit your \wp-content\themes\enfold\archive.php on line 69 look for ‘columns’ => 3; and change to the number you wish:

You can copy the modified file to your child theme if you wish.

Best regards,
Mike

Hi,
Did you try disabling all of your plugins? Issues that are similar to this are typically caused by plugin conflicts. We would need to see the issue to assist, try creating a test page with the issue and include an admin login in the Private Content area.

Best regards,
Mike

Hi,
Thank you for your patience, when I check your site on PageSpeed Insights the 15 layout shifts all seem to be due to curtain-reveal-overlay animation on some of your columns. This animation is specifically designed to be delayed and will cause a layout shift. You could choose to not use the animation in the elements or you could follow our documentation to disabled the animation for a specific page or only on mobile.
For example to remove the animation on your homepage on mobile add this css to your WordPress ▸ Customize ▸ Additional CSS, please note that the WordPress Additional CSS has the highest priority:

@media only screen and (max-width: 767px) { 
.home * {
opacity: 100!important;
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}
}

I tested this on my demo site and this changed my layout shift from 15 to 1.
You will want to keep in mind that any lazyloading that your wp-optimize plugin is doing will also affect the layout shift, one way around this is to define a min height for the element so when the element is shown it doesn’t cause a layout shift.
When I looked for the lottie issue in the PageSpeed Insights it seems to be the svg has a height & width of 1080px which is larger than the mobile device, but this size is embedded into the file. So I guess you could create a second smaller lottie file for mobile devices, or ingore this warning.

Best regards,
Mike

Hey ThiloKiefer,
Thank you for your patience, it looks like you are using v5.4.1 and our current version is v5.6.10
The Dev Team made some ARIA adjustment in v5.6.5 which I believe will address this issue please try updating.
Due to the age of your version you may need to manually update. To update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

Best regards,
Mike

Hi,
Your post didn’t work, but I fixed it on your site for you please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Please note that the error of not being able to type spaces between words is typically do to a plugin, please disable all of your plugins and check again, and thn enable you plugins one at a time to find the conflict.
I see that you have a child theme, if you have a custom footer.php & header.php, please remove these files and any customizations you wish to make should be done in your child theme functions.php we do not recommend adding these files to your child theme, it is the most common reason for errors when updating.
Your live site is not showing the topbar like the wayback version, so ensure that this is enable in your theme settings.
If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thanks for your screenshot of the alert that shows the file avia-js.js causing the alert, this file only has 137 lines as a helper for plugins.
I checked the file with http://www.virustotal.com / http://www.metascan-online.com / http://www.jotti.org each use the Avast engine and they came back with negative results:

as you had pointed out above. Since this is a plugin helper I recommend disabling all of your plugins and check again.
I tried searching the Avast forums for more info but their responses always seem to be to recheck the file with an online teast site. This is surely a false positive but there is nothing the theme can do to make this software stop doing this. Perhaps Avast has a way for you to report errors like this so it will be corrected in there next update, I don’t use Avast so I’m not sure.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
When I test your ‘Services’ page with the following code it works correctly, try adding the css to your WordPress ▸ Customize ▸ Additional CSS

.page-id-18 #av_section_2 .flex_column .avia-button-wrap {
 position: absolute;
 bottom: 25px !important;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 width: 300px;
}

.page-id-18 #av_section_2 .flex_column {
 height: 475px;
 min-height: 475px;
}

Best regards,
Mike

Hi,
Thank you for the link to your site, please note that you are using 1/4 columns for the “Dry Rubs”

So what is your mobile expectation for these columns, full width?

Best regards,
Mike

Hi,
This is strange because when I examine the “Dry Rubs” 3 columns then have the class for 1/4 columns, this is why the css above is affecting them.

please include an admin login in the Private Content area so we can examine closer.

Best regards,
Mike

Hey SurigliaStudio,
Please link to your page so we can examine the burger X and assist.

Best regards,
Mike

Hi,
I guess I don’t understand why you are using the 1/4 column to create rows with only 3 columns and what you expect from a mobile view with a three element row.
To add a custom class go to the advanced tab in developer settings:

Best regards,
Mike

Hey teamvelocitymarketing,
I used two columns, one with a accordion, the other with a image element and add the custom class to the image element like in the video: toggle-img

then I used this jQuery like in the video:

    jQuery(function() {
const img = "";
  jQuery('p[data-fake-id="#toggle-id-1"]').click(function(){
    jQuery(".toggle-img img").attr('srcset',img);
     jQuery(".toggle-img img").attr('src',img);
  });
});

note I made the adjustment for Enfold ‘p[data-fake-id=”#toggle-id-1″]’ just change #toggle-id-1 to #toggle-id-2 for the second toggle, etc
I used the code block element for the jQuery with the “script” tags:

Please give this a try.

Best regards,
Mike