Search code examples
cssgoogle-chromefirefoxmedia-queries

Why do my media queries for a table work in chrome but not firefox?

I am styling a custom menu bar with media queries so that it is responsive, and it works in chrome and safari but not firefox. I have tried using the class, the id, a hierarchy of classes, but firefox does not want to show it properly no matter what I do.

You can see the issue here: http://wanagogo.com (inspect element to see the html)

These are the queries that are currently working in chrome:

@media (max-width: 1200px) {
.kidsnav {
width: 900px;
}}
@media (max-width: 1024px) {
.kidsnav {
width: 700px;
}}
@media (max-width: 800px) {
.kidsnav {
width: 520px;
}}
@media (max-width: 600px) {
.kidsnav {
width: 97%;
}}
@media (max-width: 480px) {
.kidsnav {
width: 90%;
}}

Am I missing something? Any guidance would be appreciated!

Solution

  • It is because you are using 2 Selectors to declare the Table:

    1st:

    table#Table_01 on line 563

    and then

    .kidsnav on lines 560, 567, 571, 575 & 579 (repeated due to your media queries).

    So It is all related to Specificity, Check it HERE and HERE for more info

    Edit

    to make your menu responsive you have to do at least 2 things in your CSS:

    1st: add .kidsnav img {width:100%}

    2nd: change speel width, instead of .speel {width:172px} change to .speel {width:100%} `