如何阻止移动CSS被主要CSS覆盖

Question

My CSS contains the following code for the footer:

footer
{
text-align:center;
font-size:small;
    /* Part 3/3 of Sticky Footer code */
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
overflow: hidden;
}

The footer text was getting cut off on mobile, so I added the following line:

@media only screen and (orientation: portrait) {
footer
{
height: 40px;
}
}

The 40px height rule gets overridden by the 30px rule. It only works with !important so I am a bit confused. Which CSS rules? Shouldn't media-specific queries follow their own rules in case of a conflict? Isn't that the whole point of having separate CSS rules for different media types?

Answer 1

Check what is the placement of your CSS.

If CSS class in one file make sure that mobile CSS class is written after main CSS.

If they are in multiple files then mobile CSS should be added after main CSS.

Answer 2

This is not how mediaqueries work. CSS still follows the same rule of specifity as always. If you write footer {...} and then 10 lines after this statement you write footer { ... } again the styles in the second footer overwrite the one from the previous line.

The same is true for styles with @media rule, they just get evaluated on certain screen sizes. You don't say "this is how this must look like for this resolution". Otherwise you would have to write lots of duplicate CSS. You can overwrite styles, but you also have to take care about the order in which you place your styles.

You wrote that the mobile footer rule is at the top of the file. If you want to overwrite the rule for this devices you should move all your mobile CSS to the bottom of the file.

Answer 3

I alwayss follow css calc method
the problem was found on your footer height so to override this u can use calc method on CSS this is useful.

@media only screen and (orientation: portrait) {
footer{
    height: calc( 100% + 40px );
  }
}