Gombok pozicionálása mobil képernyőn


#1

Sziasztok!

WordPress Tablepress táblázatkezelő bővítményt használok. A táblázat felett többféle szűrő található gomb formájában. Asztali gépen tökéletesen sikerült elhelyeznem a gombokat, viszont mobilos/tabletes nézeten gondok vannak, a gombok átfedik egymást (mellékelek képet). A media query-ket tudom használni a különféle képernyőkre való hivatkozáshoz, a CSS pozicionálásban kellene segítség.

Van egy kódrészletem, ami tökéletesen működik asztali gépen. Tud valaki segíteni a gombok pozicionálásában/elhelyezésében mobil- és tabletképernyőn?
Ideális esetben úgy szeretném, ha a nagy Search box alá menne a Breed és a Followers szűrő mobilképernyőn.

Köszönöm a segítséget előre is!

Az alábbi kódrészlet működik jól asztali gépen - kép mellékelve a nézetekről:

/Filtering section on desktop screen/
/Column filter widget settings – breed, followers/
.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/ - ez nem kell mobilra
.dataTables_length {
float: left;
width: 27%;
padding-bottom: 10px;
}

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

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


#2

Szia Andi!

Ha ezeket a hozzáadott kódokat törlöd, akkor működik a mobil verzió?