Title: Responsive inline drop-downs
Last modified: February 8, 2023

---

# Responsive inline drop-downs

 *  Resolved [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/)
 * I’m trying to make 4 inline drop-down filters responsive, but all of the style
   elements seem to be marked as !important at sizes that are incompatible with 
   my layout.
 * My site content is at 1200px max width and I’m using the TT3 theme. I’d like 
   to make the drop-downs 23.333% wide with 1% padding between down to maybe 425px
   wide, at which point I’d prefer they are at 100% without padding.
 * I have the paid version of the plugin, but maybe I’m doing something wrong. I’ve
   tried setting Display filters in line max count to 4 but that doesn’t help at
   all.
 * Can you help, please? Thank you.

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Plugin Author [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/)
 * (@dholovnia)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453388)
 * Hi,
 * If you have paid version you need it to create a group, add filters into the 
   group, turn on in-group option `show filters in-line`, save the group and add
   it to the sidebar.
 * Regards,
   Dmytro
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453495)
 * Sorry, I’m not using a sidebar. I have the filters displaying full width above
   my products on shop, category, and tag pages.
 * This is the element I’m having issues with:
 *     ```wp-block-code
       <div class="berocket_inline_filters berocket_single_filter_widget berocket_single_filter_widget_244 brfilters-responsive berocket_inline_filters_rewidth" data-id="244" style="width:16.666%!important;width:16.666%!important;" data-min_filter_width_inline="175"></div>
       ```
   
 *  Plugin Author [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/)
 * (@dholovnia)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453502)
 * Hi,
 * It doesn’t matter if you use sidebar. Btw group also has option to show filters
   above products.
 * Regards,
   Dmytro
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453517)
 * Yes, that’s the option I’m using; filters above products. The filters aren’t 
   filling the width of the space available, or they’re filling it and dropping 
   down to a new line.
    -  This reply was modified 3 years, 3 months ago by [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/).
      Reason: Adding information
 *  Plugin Author [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/)
 * (@dholovnia)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453530)
 * When turning on `Display filters in line` you will get extra option `Display 
   filters in line max count`. Set `Display filters in line max count` to 4, or 
   how much filters you will have.
 * Regards,
   Dmytro
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453544)
 * I see the problem. The widget is set to 25% width and there’s 15px padding added,
   which is dropping it to 2 lines. There’s no room for the padding, but both the
   size and padding elements are marked as !important, so I can’t change them.
 * From 425px screen resolution and down, I’d like them to fill 100% of the line
   when stacked, but they’re set to 50% !important;
 * Does that make sense?
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453553)
 * > [View post on imgur.com](https://imgur.com/a/nNYYL9A)
 * Maybe I’m not explaining it properly. Please see attached image.
 *  Plugin Author [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/)
 * (@dholovnia)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453561)
 * There are almost no inline styles (expect Javascript way) with !important. So
   you can always add your style by copying our style and add more weight by `html`
   before eg
 * .class a {
    some: style !important;}**this has more weight**html .class a { some:
   another-style !important;}
 * Regards,
   Dmytro
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16453576)
 * There are 165 !important tags in your main.min.css file under \assets\frontend\
   css which is over 57,000 characters long.
 * Apparently, that’s where this styling is located.
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456826)
 * I tried your suggestion, but I can’t actually pinpoint the element itself. I 
   might be a little bit useless at CSS. Can you help me figure this out?
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456862)
 * Never mind, I got it. For anyone else having this problem, I found the min-width
   and max-width weren’t declared anywhere. I’m adding the CSS I used to the bottom
   of the thread.
    -  This reply was modified 3 years, 3 months ago by [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/).
      Reason: Revising code
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456865)
 * Thank you for your help, Dmytro!
 *  Plugin Author [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/)
 * (@dholovnia)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456882)
 * Please provide your site url.
   **UPD.**Sorry, didn’t see your last messages. Great
   that you found a solution.
    -  This reply was modified 3 years, 3 months ago by [Dmytro Holovnia](https://wordpress.org/support/users/dholovnia/).
 *  Thread Starter [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * (@beeloudglade)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456900)
 *     ```wp-block-code
       @media only screen and (max-width: 554px) {
       html #main > div.berocket_element_above_products > div.berocket_inline_filters.berocket_single_filter_widget.berocket_inline_filters_rewidth {
       	max-width: 99% !important;
       	min-width: 99% !important;
       }
       }
   
       @media only screen and (max-width: 625px) {
       #main > div.berocket_element_above_products > div.berocket_inline_filters.berocket_single_filter_widget.berocket_inline_filters_rewidth {
       	max-width: 47% !important;
       	min-width: 47% !important;
       }
       }
   
       @media only screen and (max-width: 768px) {
       #main > div.berocket_element_above_products > div.berocket_inline_filters.berocket_single_filter_widget.berocket_inline_filters_rewidth {
       	max-width: 48.333% !important;
       	min-width: 48.333% !important;
       }
       }
   
       @media only screen and (min-width: 769px) {
       #main > div.berocket_element_above_products > div.berocket_inline_filters.berocket_single_filter_widget.berocket_inline_filters_rewidth {
       	max-width: 23.5% !important;
       	min-width: 23.5% !important;
       }
       }
       ```
   
    -  This reply was modified 3 years, 3 months ago by [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/).
      Reason: Corrected the CSS

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Responsive inline drop-downs’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce-ajax-filters/assets/icon-256x256.gif?rev=2770304)
 * [Advanced AJAX Product Filters](https://wordpress.org/plugins/woocommerce-ajax-filters/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce-ajax-filters/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce-ajax-filters/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce-ajax-filters/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce-ajax-filters/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce-ajax-filters/reviews/)

## Tags

 * [width](https://wordpress.org/support/topic-tag/width/)

 * 14 replies
 * 2 participants
 * Last reply from: [wp_enthusiast](https://wordpress.org/support/users/beeloudglade/)
 * Last activity: [3 years, 3 months ago](https://wordpress.org/support/topic/responsive-inline-drop-downs/#post-16456900)
 * Status: resolved