Reply To: Compact Mode In Responsive

#11502

Ernest Marcinko
Keymaster

Hi!

Sorry for the delay!

It's not possible unfortunately. The compact mode is affected by javascript as well, so some custom CSS would not do the trick here.

One thing you can do is to create two search instances (1st as regular, 2nd as compact), and either use a media query and custom CSS to completely hide the first one/display the second one below 992px and vice versa. Something like:

/* Above 992px width */
@media screen and (min-width: 992px) {
  /* Force hide the second search */
  .wpdreams_asp_sc-2, .asp-try-2 {
    display: none !important;
  } 
}
/* Below 992px width */
@media screen and (max-width: 991px) {
  /* Force hide the first search */
  .wpdreams_asp_sc-1, .asp-try-1 {
    display: none !important;
  } 
}

This is the fastest and the best possible method I can think of.

Best,
Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)