Mobile view (iPhone) the Checkboxes in the sidebar hide the results

[ckworld]

Mobile view (iPhone) the Checkboxes (categories and tags) in the sidebar hide the top of the results display. See attached screenj print

Check: http://www.ckwebdesign.eu/test2/search-filter/ on mobile device

[Ernest Marcinko]

Hi!

In the default ‘hover’ mode, both the results and the settings box have z-index values assigned, so that the one with the higher value is on top of the other. The default setting is that the ‘settings’ box has a higher z-index. You can change that here: https://i.imgur.com/29WBZ3E.png

After changing that, make sure to clear all cache.

[ckworld]

Thanks for your answer. I do understand that, but I would like to have the results displayd on mobile devices BELOW the setings box.
I can probably do that with a media screens setting??

Any suggestions how to achieve that

[Ernest Marcinko]

Hi,

In that case, maybe using the block position for the settings might be a better option. Most of the styling will be inherited from the theme, but it will not hover over anything, and the results will be below it.

[ckworld]

Hi,

Yes that works, but the Ajax Pro css (backgroundcolor etc.) is gone

[Ernest Marcinko]

Hi,

Yes, as I stated earlier “Most of the styling will be inherited from the theme, but it will not hover over anything, and the results will be below it.”

With custom CSS however you can force the same colors:

div.asp_sb_1 {
    background: linear-gradient(185deg, rgb(109, 204, 237), rgb(104, 174, 199)) !important;
}

div.asp_sb_1 .asp_option_label {
    color: white;
}

That should do the trick.

[ckworld]

Thank you,

But now another problem, The checkboxes of STACKS (post-category) and COUNTRY (post-tags) appear double on the page ?????

Please advice

check out:
http://www.ckwebdesign.eu/test2/search-filter/

[Ernest Marcinko]

Hi,

It happens, because the same search shortcode is two times on the same page, and the results shortcode is moved there for both search instances. The first search is hidden within the menu, I am not sure what is that for.

You can either try removing that shortcode from the menu, or you can try this custom CSS to get rid off the duplication, if that is not possible:

.asp_sb_1_1,
.asp_s_1_1,
.asp_r_1_1 {
    display: none !important;
}

[Author]

Posts