CODEWITHSUNDEEP
cssmedia-queriesscreen
Frank Müller
Frank Müller

Reputation: 7

CSS media device does not apöply

I don't understand, why this does not work:

@media screen and (max-width: 600px) {

    .contentBlockText {
        position: relative;
        display: inline;
        width: 100%;
        background: #f00;
    }

}

.contentBlockText {
    position: relative;
    display: inline;
    width: 66%;
    background: #fff;
}

The result always showns the width of the box with 66%. Also an my Samsung S9, it does not change the dimensions. I also tried the max width option with different widths. Same result. Can you see the problem? I have used that mechanism at some other position in the same sytle sheet and it works...

Upvotes: 0

Views: 41

Answers (1)

Ghighi Eftimie
Ghighi Eftimie

Reputation: 66

Try to change the order of the rule blocks, put the query after the default. I had encountered similar behavior and this had worked for me.

EDIT: I wasn't paying attention. You cannot set width or height on inline elements. Just make it inline-block. It should be ok.

"The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS." https://web.stanford.edu/class/cs193x/lectures/05/block-inline

Upvotes: 2

Related Questions