Hi, William

Thanks for reaching out to us

- These CSS styles, are called on a media query, that is stating this should happen only when the screen goes larger than 500PX ( min-width 500px)

If we remove the media query only for width larger than 500PX, and now this is going to be applied on all screens :

.wpDataTablesWrapper .dataTables_filter label {
margin-left: 307px!important;
border: solid!important;
border-width: 2px!important;
padding: 5px!important;
}
input.form-control {
border-bottom: none!important;
}

Check it out, and let me know if you need further assistance. Thanks

Hi, William

Sorry, just remembered something to add... In case that the alignment does not perfectly look on all screens... You can consider to actually leave the old Styles as they were.... So, you can keep this, for screens larger than 500PX ( one CSS statement for screens larger than 500PX width) :

@media only screen and (min-width: 500px) {.wpDataTablesWrapper .dataTables_filter label {
margin-left: 307px!important;
border: solid!important;
border-width: 2px!important;
padding: 5px!important;
}
input.form-control {
border-bottom: none!important;
}
}

and you can add another one, to create different styles, for when the screens are below 500PX, like this :

@media only screen and (max-width: 500px) {.wpDataTablesWrapper .dataTables_filter label {
margin-left: 307px!important;
border: solid!important;
border-width: 2px!important;
padding: 5px!important;
}
input.form-control {
border-bottom: none!important;
}
}

( I just copied same styles, but you can edit them) 

and then, see if, for screens smaller than the width of 500PX, if you need to make "different" adjustments", if that makes sense?

Just an advice, because I had experienced when that had to be done. Of course, this depends on what design you are going for.

Here is a useful resource about creating manual responsive breakpoints :

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

( P.S.

 I am a huge fan of the game - Smite, it's awesome )

Hi, William

- I just basically copied the same snippet which you sent me in the original message?

@media only screen and (min-width: 500px) {.wpDataTablesWrapper .dataTables_filter label {
margin-left: 307px!important;
border: solid!important;
border-width: 2px!important;
padding: 5px!important;
}
input.form-control {
border-bottom: none!important;
}
}

I did remove the media query statement from it, so, technically I did change it, because you wanted the snipped to be applied to all screen sizes, I guess.

-

Now, the margin-left property is pushing the element away from the left edge of the page ( moving it to the right).

While 307 pixels might be OK on larger screens, if you decrease the screen, the width shrinks, and the element will seem as it is pushed more to the right.... Perhaps you can try to use percentage value instead of PX, that way it will always look to take certain percentage of the screen/page, rather then fixed pixel value - if that makes sense.

So, basically, if you reduce this margin-left value, or completely remove it for smaller screens, maybe you can add a CSS media query for screens smaller than 500px width like this :

@media only screen and (max-width: 500px) {.wpDataTablesWrapper .dataTables_filter label {
float:left !important;
border: solid!important;
border-width: 2px!important;
padding: 5px!important;
}
input.form-control {
border-bottom: none!important;
}
}

- Seems like you changed something in the meantime as well? Apologies for my slow response time.

Let me know how it goes, and if I can assist further. Thank you