Joomla Templates Club 406,261 posts

[thkellmann Friend thkellmannJoin date: March 2014Posts: 75Downloads:38Uploads:32 Thanks: 66 Thanked: 3 times in 1 posts]

#208993

Hello everybody,

i hide the k2 search input field with follow code in the custom css.

li.form-group:nth-child(1) {display:none;}

The Filter width size it?s after hide the input field to big. I found no way to shrink the k2 search filter.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#577904

Add the css style below into custom.css file

@media (min-width: 1200px) {
.t3-section.has-slideshow .search-now, .t3-sidebar.has-slideshow .search-now {
width: 70% !important;
margin-right: auto !important;
margin-left: auto !important;
}

.t3-section .search-now div ul.horizontal-layout li, .t3-sidebar .search-now div ul.horizontal-layout li {
width: 40% !important;
}

.t3-section .ja-k2filter.form-horizontal, .t3-sidebar .ja-k2filter.form-horizontal {
padding: 0 0px 0 50px !important;
}
}


The problem on your site will be gone.

1 user says Thank You to Ninja Lead for this useful post

1. thkellmann

[thkellmann Friend thkellmannJoin date: March 2014Posts: 75Downloads:38Uploads:32 Thanks: 66 Thanked: 3 times in 1 posts]

#577958

Hello Ninja,

thanks for you support, i copy your code in the css and it works fine. Only in some responsive resolutions i have problem. It?s anytime in the portrait view, the landscape view works fine. It?s possible to fix that`?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#578109

Yes, my custom above only works with width larger than 1200px, if you want to make it with all responsive resolutions, you can define as

// with width 768px @media (min-width: 768px) {
}

// with width 800px @media (min-width: 800px) {
}

// with width 980px @media (min-width: 980px) {
}

// with width 1920px @media (min-width: 1920px) {
}

and change the value in red for each resolution


.t3-section.has-slideshow .search-now, .t3-sidebar.has-slideshow .search-now {
width: 70% !important;
margin-right: auto !important;
margin-left: auto !important;
}

.t3-section .search-now div ul.horizontal-layout li, .t3-sidebar .search-now div ul.horizontal-layout li {
width: 40% !important;
}

.t3-section .ja-k2filter.form-horizontal, .t3-sidebar .ja-k2filter.form-horizontal {
padding: 0 0px 0 50px !important;
}


Hope it helps

1 user says Thank You to Ninja Lead for this useful post

1. thkellmann

[Author]

Posts