CODEWITHSUNDEEP
htmlcss
Upsetti_Spaghetti
Upsetti_Spaghetti

Reputation: 71

HTML/CSS - Text-align invalid in media queries

I am editing the CSS of a DataTable plugin, When my window is at 839px or less I want my search filter to be on the left and when it's 840px or bigger I want it on the far right.

If I use only the text-align rule I will get an invalid value when the media query kicks in.

I managed to pull it off using, text-align to pull it on way when it's 839px or less and Flex when it's 840px or more, just wandering if I can do it cleaner.

Code I used.

.dataTables_filter {
    text-align: right !important;
}

@media only screen and (max-width: 839px) {
    .dataTables_filter{
        display: flex;
        justify-content: flex-start;
    }

Fixed - Thanks DreamTek

Used the following code to make it more uniform and clean.

.dataTables_filter {
    float: right;
}

@media only screen and (max-width: 839px) {
    .dataTables_filter {
        float: left !important;
    }
}

Upvotes: 1

Views: 398

Answers (1)

DreamTeK
DreamTeK

Reputation: 34217

If it is the position of .dataTables_filter that you want to edit then you need to adjust the float property used in datatables.

.dataTables_filter {
  float:right;
}

@media only screen and (max-width: 839px) {
  .dataTables_filter{
    float:left;
  }
}

From https://www.datatables.net/

enter image description here

enter image description here

Upvotes: 1

Related Questions