Why is width not taking effect within my media query?

Question

I have never run into this issue before, but for some reason, I cannot modify the width in my media query. In the developer tools, the width shows as being crossed out like I toggled it to not show, but that is not the case, it does it by default.

I am simple trying to change this:

div.wrapper{
    display:block;
    width:100%;
}

into this:

.wrapper {
    width: 95%;
    margin: 0 2.5%;
}

I have even tried changing my media query wrapper class to div.wrapper...but it did not help,

What would be causing this?

Is your media query called before or after the other part of CSS that erase it ? — Vincent G, Mar 24 '16 at 18:18
I just added a new image. Would having the main css structured as `.column .sponsors` effect being able to modify `sponsors` in my media query? Would it partially take on what `column` is? — Becky, Mar 24 '16 at 18:24

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

I think you should read this article: CSS: Understanding the selector's priority / specificity

There's priority when you use CSS rules.

For example, .column .sponsors will have priority on just .sponsors

edited May 23 '17 at 12:23

Community

1
1

answered Mar 24 '16 at 18:26

Vincent G

8,547
1
18
36

score 1 · Answer 2 · answered Mar 24 '16 at 18:16

1

In your media query, use the same definition than previously:

div.wrapper {
    width: 95%;
}

answered Mar 24 '16 at 18:16

Romain biard

186
9

score 1 · Accepted Answer · answered Mar 24 '16 at 18:20

1

In css if we call an element like attribute.classname(div.wrapper) it will have more priority than calling .classname(.wrapper).

now you have two ways to solve this.

Change the calling method (use same way of calling in main-css and media-query).
Else give an adiitional property '!important' after width in .wrapper .

.wrapper { width: 95% !important; margin: 0 2.5%; }

answered Mar 24 '16 at 18:20

I just added a new image. Would having the main css structured as `.column .sponsors` effect being able to modify `sponsors` in my media query? Would it partially take on what `column` is? – Becky Mar 24 '16 at 18:24
Whats happening here is 'layout.css' will over writing the styles of 'index.php'. It may be also due to the arrangement of linking style sheet too. The bottom most one will over write the styles of top ones. so please check the arrangement of linking style sheets. If still the problem is there add !important with the width of .wrapper .wrapper { width: 95%!important , margin: 0 2.5%, } – Mar 24 '16 at 18:29

score 0 · Answer 4 · answered Mar 25 '16 at 09:57

0

With regards to your .column .sponsors problem, you should do the same:

@media screen and (max-width: 640px)
{
    .column .sponsors {
        width: 90%;
    }
}

This will not modify the .column declaration.

answered Mar 25 '16 at 09:57

Romain biard

186
9

Why is width not taking effect within my media query?

4 Answers4