My media queries are not working as expected

Question

This is the markup of a web page I'm working on right now:

<section style="background-image: url(img/about-banner.jpg); height: 100vh; position: relative; background-size: cover;">
    <div class="container" style="width: 90%;">
        <div class="display-table">
            <div class="table-cell" style="vertical-align: bottom;">
                <div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;">
                    <h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text</h1>
                </div>
            </div>
        </div>
    </div>
</section>

The two main areas of interest are

<div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;"

and

<h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text

For screen sizes below 1025x I'm trying to make the font-size 5vw and margin-bottom: 30vh;

These are the media queries I put in responsive.css:

@media (max-width: 1024px) {
.header_section_fix {
    font-size: 1.5vw;
}

.header_fix_links a {
    margin-right: 3%;
}

.about-header {
    margin-bottom: 30vh;
    margin-left: -2vw;
}

.other-header-h1 {
    font-size: 5vw;
}

In the above css, both .header_section_fix and .header_fix_links are working. However the media queries for .about-header and .other-header-h1 do not work on the webpage.

Did you try with !important and did you check any other styles are applying? — Nayas Subramanian, Jun 02 '17 at 13:07
It's because inline css has a higher priority than other css. Or you will have to put !impotant on it, or you will have to remove the inline css. — Arjan Knol, Jun 02 '17 at 13:08
@AMH I tried using !important but it still did not seem to make a difference. — , Jun 02 '17 at 13:26
@NayasSubramanian I did check if any other stylings interfered but that did not turn out to be the case. — , Jun 02 '17 at 13:28
@Aswath.s remove the inline styles and check stykes are now applying to header tags — Nayas Subramanian, Jun 02 '17 at 13:51
@NayasSubramanian I have removed inline styles. Refer to my latest comment in Quentin's answer to see what that line looks like now. — , Jun 02 '17 at 14:27

score 0 · Answer 1 · answered Jun 02 '17 at 13:12

0

Normal specificity rules apply.

The inline style has a higher specificity than the ruleset in the media query, so it overrides the value you want.

Move the value in the style attribute into the stylesheet.

answered Jun 02 '17 at 13:12

Quentin

914,110
126
1,211
1,335

Moved the values but it still does not seem to work. – Jun 02 '17 at 13:24
I have removed all the inline styles and moved them to the stylesheet (style.css which is different from responsive.css). This is what the code looks like now:

Title Text

– Jun 02 '17 at 14:24

score 0 · Accepted Answer · edited Jun 04 '17 at 08:00

Below are a few ways to isolate this issue for the fix:

Firstly get rid of all your inline styles, and put them in the external style-sheet. Your going to have a hard time getting your media queries to override inline styles.
Secondly, double check that your meta view-port is being defined properly in the head of your document.
Thirdly make sure there is no conflicts with these selectors and styles being defined elsewhere in the application. ie. If you are defining margin-top: with a selector somewhere else, then use margin-bottom: in your media queries; stuff like that (make sure you are consistent with css properties and not creating conflicts).
Fourthly, make sure your CSS is valid and there is no syntax errors. Also, try to match the order of the CSS selectors in the stylesheet with how they appear in the HTML.
Your last resort scenarios would be using !important; or enclosing in a separate, second media query instance; or rearranging where these selectors are being called in the stylesheet. These may work, but ultimately would be a reach around for some conflict.

My media queries are not working as expected

2 Answers2

Title Text