Hi,
To change the big icon list into a small icon list for mobile we need to swap the class av-iconlist-big with av-iconlist-small and change the iconlist title by swaping the class av_iconlist_title with av-iconlist-small and by default the small icon list title doesn’t use a H tag it uses a plain div.
So note that in the following snippet it looks for the ID Ablaufschritte and it removes your h4 tag, so if you change the H tag in the future or your section ID you will need to update the snippet.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_iconlist_big_to_small_below_tablet() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    $('#Ablaufschritte').each(function() {
      var width = $(window).width();
    if ((width <= 767)) {
      $('.avia-icon-list').removeClass('av-iconlist-big').addClass('av-iconlist-small');
      $('li').each(function() {
      	$('.av_iconlist_title').removeClass('iconlist_title').addClass('iconlist_title_small');
      });
      replaceElementTag('h3.av_iconlist_title', '<div></div>');
    } else {}
  });
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'change_iconlist_big_to_small_below_tablet');

When you test with the Dev Tools on your desktop you will need to refresh the page after emulating a mobile device, this will work correctly on a real mobile device, and if you switch back to a desktop screen you will need to refresh again.
Since a real mobile device won’t switch the screen size in the real world there is no reason to make the code more complicated.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Your snippet is to make the single product gallery images 250×250, but I don’t see that you have any single product gallery images on your product pages, so I assume that you was hoping this would do something else.

Nonetheless I added it to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 250,
'height' => 250,
'crop' => 1,
);
});

Perhaps this article will help you with what you are trying to achieve: How to override WooCommerce Image Sizes

Best regards,
Mike

Hey Malene,
I checked your site but didn’t see any errors, and I don’t see a LayerSlider on the page, but the line you are refuring to seems to be for the slide count.
Are you seeing this because you have WP Debug enable?

Best regards,
Mike

Hi,
Glad Guenni007 could help, thank you Guenni007, 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,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .awpage-document strong,
#top .awpage-document label span {
	color:#fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad Guenni007 could help, thank you Guenni007, let us know if you need any further help or if we should close this thread.

Best regards,
Mike

Hi,
Thank you for your patience, first add the custom class black-background-color to your product columns:

Then highlight the text you want to be white and set the color:

I added this css for you in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

.black-background-color {
	background-color: #000;
}

Now one product is done, please try following these steps for the rest of your products:

Best regards,
Mike

Hi,
When I check the numbers I see that you are using css to make the font size 14px below 850px and above that they are 24px:

@media only screen and (max-width: 850px) {
#top .VuK-IconList-numbers li .iconlist-char:before {
    font-family: 'PT Sans',Helvetica,serif;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    bottom: 2px;
}
}

Perhaps you just added this after you asked the question, but it seems to be working for me.
As for your first question, I don’t see a second icon list element, I see a hotspot element, but I thought it was only a test, perhaps if you explain further with some context and a admin login it would make more sense, but right now I think the one iconlist #Ablaufschritte element looks fine on both desktop and mobile and I would remove the hotspot element.

Best regards,
Mike

Hi,
I believe there is some confusion here, this thread is about the slide show and not the accordion.
Pease see your first post:

I have a slide show with navigation controls that autoplay. Once I touch it and scroll (or left or right) it stop autoplay.

Perhaps you meant to post your comment in a different thread?
I restored your fallback slideshow.js file.

Best regards,
Mike

Hi,
Please note that background videos are not expected to show on mobile devices and you will need to choose a Fallback image in the slider.

Best regards,
Mike

Hi,
Ok, please replace the modified \slideshow\slideshow.js file with the original that you saved for fallback, and then include a FTP login for us to check.
If you are using SiteGround as your webhost please read these instructions to create a FTP login
Please note that you will need to use the slash as the directory so we will have access to your files:

Best regards,
Mike

Hey Nomad,
Thank you for your patience and the link to your site, I assume that you want them to look like this without the white dot in the center and the dashed horizontal line:

I see that your icon list has a custom class #Ablaufschritte so to change each one try this css:

#top #Ablaufschritte.avia-icon-list-container li:first-child .iconlist_icon {
    background-color: #ffffff;
    color: #930f1a;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(2) .iconlist_icon {
    background-color: #7f807e;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(3) .iconlist_icon {
    background-color: #4f5150;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(4) .iconlist_icon {
    background-color: #ac262c;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(5) .iconlist_icon {
    background-color: #930f1a;
}

You will note that I also changed the first icon list number because it didn’t show when the icon has a white background color.
After applying the css, please clear your browser cache and check.
Here is the expected results:

Best regards,
Mike

Hi,
That is ok, we are happy to help, I assume we can close this now?

Best regards,
Mike

Hi,
Try going to your file: \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\slideshow\slideshow.js and replace it with the one in the Private Content area via FTP or your webhost file manager.
Please keep a copy of your current one for fallback, Then clear your browser cache and any cache plugin, and server cache and check.
Please note that you may need to clear the cache a couple of times.
You may want to disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files

Best regards,
Mike

Hi,
Thanks for sharing Guenni007, were you able to achieve this menainfosec?

Best regards,
Mike