how to give @media query to my inline style?

Question

i am making a responsive site and using media query for that but, i stuck with one problem where i had given inline style. and now i want to change that style for different size of screen. how it can be done? here is my code.

<table class="edu_table" style="width:500px;margin-right:400px;margin-bottom:30px;">

in style i had given width=500px; i want it 700px for

@media only screen and (max-width: 1920px) {
}

1920px size screen.please give solution for it or give other way to do this thing.i am using edu_table class many places...and i want width=700px; for screen size 1920px and for particular place.

Why do you even use inline style? Move that style to a css file — Marvin Fischer, Jul 09 '15 at 07:36

score 2 · Answer 1 · answered Jul 09 '15 at 07:39

<table class="edu_table"></table>

remove inline style

 .edu_table{
         width:500px;
         margin-right:400px;
         margin-bottom:30px;
    }
@media only screen and (max-width: 1920px) {
    .edu_table{
         width:700px;
    }
}

if you can not remove your inline style then use Important

@media only screen and (max-width: 1920px) {
        .edu_table{
             width:700px !important;
        }
    }

AlexG · Accepted Answer · 2015-07-09T07:43:44.140

0

Here is what you want, put this in a css file or at be bottom of the <head>. Though the width should always be at 700px because you set them max-width. At the moment it is everything to a max-width of 1920px, everything above will get the 500px.

.edu_table{
     width: 500px;
}

@media only screen and (max-width: 1920px) {
    .edu_table{
         width: 700px;
         margin-right: 400px;
         margin-bottom: 30px;
    }
}

edited Jul 09 '15 at 07:43

answered Jul 09 '15 at 07:38

AlexG

5,649
6
26
43

i am using edu_table class many places...and i want width=700px; for screen size 1920px and for particular place. – Divyesh Jesadiya Jul 09 '15 at 08:08
3

no problem, you can give an element multiple classes or a different one, you can name the css above something like `.edu_table--main` and give that particular table `class="edu_table--main"` – AlexG Jul 09 '15 at 08:16

score 0 · Answer 3 · edited May 23 '17 at 12:16

It is not possible to put media queries in style attributes.

target the class with the css:

.edu-table {
    width: 500px;
    /* styles */
}

Then over-ride them when the screen is 1920px or wider:

@media only screen and (min-width: 1920px) {
    .edu-table {
        width: 700px;
        /* any other styles for 1920px and above */
    }
}

Using min-width in the media query will ensure the styles only apply to screens wider than 1920px.

Also, remove the inline styles as they will over-ride the css. You could use !important but only if you have no other conceivable option, as it is a nightmare to over-ride and can make a real mess of stylesheets.

how to give @media query to my inline style?

3 Answers3