Responsive inline drop-downs

  • Resolved wp_enthusiast

    (@beeloudglade)


    3 years, 1 month ago

    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

    (@dholovnia)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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:

    <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

    (@dholovnia)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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, 1 month ago by wp_enthusiast. Reason: Adding information
    Plugin Author Dmytro Holovnia

    (@dholovnia)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    View post on imgur.com
    Maybe I’m not explaining it properly. Please see attached image.
    Plugin Author Dmytro Holovnia

    (@dholovnia)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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

    (@beeloudglade)

    3 years, 1 month ago

    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, 1 month ago by wp_enthusiast. Reason: Revising code
    Thread Starter wp_enthusiast

    (@beeloudglade)

    3 years, 1 month ago

    Thank you for your help, Dmytro!

    Plugin Author Dmytro Holovnia

    (@dholovnia)

    3 years, 1 month ago

    Please provide your site url.

    UPD.
    Sorry, didn’t see your last messages. Great that you found a solution.

    Thread Starter wp_enthusiast

    (@beeloudglade)

    3 years, 1 month ago

    @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, 1 month ago by wp_enthusiast. Reason: Corrected the CSS
Viewing 14 replies - 1 through 14 (of 14 total)

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

Tags