Filter widget positioning on mobile view

Hello Tobias,

I’m struggling with CSS-positioning the filter widgets on mobile/tablet view. On desktop view everything works fine with this code:

/*Filtering section on desktop screen*/
/*Column filter widget settings*/
.column-filter-widgets {
float: right;
width: 30%;
}

/*Search box filter*/
.dataTables_filter {
float: left;
width: 40%;
padding-bottom: 10px;
}

/*Length filter – Show X number of rows*/
.dataTables_length {
float: left;
width: 27%;
padding-bottom: 10px;
}

/*Widget-4 filter features*/
.column-filter-widget .widget-4 {
width: 160px;
text-align: center;
padding-bottom: 10px;
}

/*Widget-6 filter features*/
.column-filter-widget .widget-6 {
width: 160px;
text-align: center;
padding-bottom: 10px;
}

This works nice on desktop view, because every filter button is in the same row.
On mobile view, I just want to set the main search filter to the right side of the screen and under the search box the widget-4 and widget 6 column filter, also adjusted to the right side of the screen. How can I achieve that?
I also tried to change the size of this buttons on mobile screen, I can affect the size of column filters, but the search filter not. Why?

Thank you in advance!

• This topic was modified 7 years, 1 month ago by andrea1989.