Media query CSS not working

Question

4.00/5 (1 vote)

See more:

Hi I have a CSS codes in which when I "Restore Down" my browser, the font size in a table row will get shrunk as well. But when I try it, it did not work as expected. Below are my codes:
CSS

CSS

@media all and (max-width: 914px) {
     .ui-Title {
        font-size:12px; 
        padding-top:5px; 
        color:whitesmoke; 
        display:inline-block
    }
}

HTML

Razor

<td class="ui-Title" style="vertical-align:middle;font-size:x-large; font-weight:bold">
    MyTitle
</td>

What I have tried:

1. Try to search Internet for better understanding about CSS media class usage but found nothing.

Posted 19-Jul-16 23:03pm

Jamie888

Updated 20-Jul-16 1:37am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2016-07-20T01:37:00

The inline CSS will always take precedence over other CSS placements. In your case, the font size is supposed to be 12px for width up to 914px as dictated by media query, but inline CSS always overrides it to x-large. Remove the inline css and place it in the head section instead, e.g.

<style>
     .ui-Title {
        vertical-align:middle;font-size:x-large; font-weight:bold
    }

@media all and (max-width: 914px) {
     .ui-Title {
        font-size:12px; 
        padding-top:5px; 
        color:whitesmoke; 
        display:inline-block
    }
}
</style>

learn more: CSS How to[^]

Media query CSS not working

1 solution

Solution 1

Add your solution here

Preview 0

Media query CSS not working

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us