CODEWITHSUNDEEP
cssgoogle-chromefirefoxmedia-queries
Dan Wolner
Dan Wolner

Reputation: 21

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!

Upvotes: 1

Views: 207

Answers (1)

dippas
dippas

Reputation: 60553

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%} `

Upvotes: 2

Related Questions