So I've been trying to troubleshoot this problem I'm having. I will be up front say I'm not a developer ad this is my first post on this website. I purchased this template off envato and I'm basically done with my website except this 1 problem. I asked a front end dev but he couldn't find the root issue. The support team for the website is trash and didn't help me.
I have a webpage where I want to have main images that you can filter.
In the original html template page when I add an additional filter it will not filter the images. Meaning when you select the newly added filter the images will not filter. It is like the filter is limited to only 2-3 choices.
Looking at the code there is this id number for the main content. This grid is a masonary grid which is not what I want to use. But I want to use the filter tool. When I try to change the data-col="2" to a 4 it does not change. That is fine.
<div id="post-1680" class="post-1680 page type-page status-publish hentry">
There is a grid associated with it along with the filter. The filter code for each image is basic and not the issue. When I added a new filter I made sure the data-catid # was different from the rest of the other filtered images.
<!--Grid module-->
<div id="" class="module col-12 module-id-1573184716638" data-module-col="12">
<div class="container-masonry ux-portfolio-2col ux-portfolio-full filter-left " data-ratio="0.75" data-col="2" data-found="10" data-number="999" data-mod="grid">
Filter images example
<li class="filters-li">
<a class="filters-a" data-filter=".filter_installation" href="XXX" data-catid="21" data-postid="1680">Installation
<span class="filter-num">1</span>
</a>
</li>
I have a built another page from this template. This page however is different where you can change the # of columns on the grid. When you change the "data col" in the html it will change between whatever number you select 2-6 and you can add a filter to it, but it doesn't work correctly. The filter breaks and it duplicates images.
<div id="post-1809" class="post-1809 page type-page status-publish hentry">
<div id="" class="module col-12 module-id-1573192737761" data-module-col="12">
<div class="container-masonry ux-portfolio-4col ux-portfolio-full ux-ratio-169 filter-left " data-ratio="0.5625" data-col="4" data-found="10" data-number="999" data-mod="grid">
Here some example webpages not mine but using the sample template I purchased. How can I get this filter the accept more then 3 choice. Say 10 or 12 filter options. I'm not using wordpress so that is out of my expertise just using as a example. Thanks.
Basically exactly this with 10 filters.
I tried recoding the whole page. I also tried to just add an additional filter to the basic template webpage and it doesn't work.