icon-list: change/control color for every icon

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,
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,
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,
I checked your page and it looks like it is working to me, I only see one iconlist with the ID Ablaufschritte and on desktop it is big:

and for mobile it is small:

On my Android mobile device it works correctly and when I test on a Windows desktop in Chrome Dev Tools emulating a mobile device the switch occurs after I reload the page, perhaps you are not testing like this? On my Android device it seems like the bottom of your page behaves with a lazy load, if you are using lazy load try disabling it.

Anyways I made an example page for you to see how I did this, first I added the custom class Ablaufschritte to the Big Iconlist:

Then on desktop the iconlist shows as it’s default big list:

and on mobile it is switched to a small icon list:

Please check my page on your mobile device and your desktop device.

Best regards,
Mike

Hi,
Glad we were able to 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