Canvas Template Grid Filter Issue

Question

Hi,

I have a question about the grid filter option. In your html template you have a grid filter example file called "gallery-filter-grid.html". The example contains 5 or 6 filter options which render quite nicely. But if I add more filter options which cannot be rendered in one line anymore, the rendering style doesn't look that good. Is there a way to align the individual buttons a bit nicer and to get a kind of "separation border line" for each row? Or is there any other way to make this look a bit better?

Thanks for your support - appreciate it!

btw: Really nice template ;-)

Konrad

SemiColonWeb · Accepted Answer

Hello,

Thanks for reporting this! Actually, the Default Filter Style is not built to accommodate too many Filter Items. However, you can consider using the following CSS Code to rectify this:
[ch_pre type="css"]@media (min-width: 768px) {
.grid-filter {
border: 0;
border-radius: 4px;
}

.grid-filter li a {
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 0;
	margin-left: -1px;
}

.grid-filter li.activeFilter a {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

}[/ch_pre]

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

pouchong · Answer

Hi,

Thanks for providing this solution. Looks way better now. Quick question: Is there a better way or feature than this grid filter to provide more filter options to the end user? With the new solution, it looks better but maybe you and template offers a better solution for that.

Thanks a lot!
Konrad

Semicolon Web · Answer

Hello,

Absolutely! We have several Portfolio Filter styles available with Canvas: http://themes.semicolonweb.com/html/canvas/portfolio-filter-styles.html .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

pouchong · Answer

Great ticket can be closed... Thanks