Media query canceling other media queries

Question

I\'m confused because the logo should be hi

Answer 1

Try

@media only screen and (max-width: 768px)
{
    .flicker-example {display: none !important}
}

Answer 2

(In the screenshot of the screen) I see that the max-width: 768px media query is declared before max-width: 960px which is incorrect. Media queries that only use max-width should be sorted descending. Let us assume that you declare media queries in this order:

1. (max-width: 768px)
2. (max-width: 960px)

If your screen is 400px wide then both media queries will match the condition. In this case the media query block declared later wins.

Solution:

Sort your max-width rules descending (larger widths first).

Or use mutually exclusive media query blocks such as this:

• (min-width: 961px)
• (min-width: 769px) and (max-width: 960px)
• (max-width: 768px)

In this case order does not matter.