Before anything else, I would like to note that you don't need to use such a complex selector class as we are using in the default X3:
body[class*='topbar'].topbar-float .nav>div>.logo
The reason we have it like this for some styles, is because of the various layouts X3 offers, we only want some styles to affects some layouts. In your case, once you have selected a layout, you could just use something like:
It is possible you may need to add a !important tag after the style declaration, just to make sure it outranks any defaults. The complex selector would be the only reason why a declaration would fail in some browser, although I never heard or experienced that before.
The adapted code you have, suggests that you want all devices over 100px width (which are actually ALL devices), to have a logo of width of minimum 320px or more ... That would only work if for some reason the declaration did not work in some browser. Also, the logo should have a "max-width" not a "min-width", because it will always try to expand. Your logic however is on track, and you are employing a technique called "mobile first responsive design", where the default CSS is for small devices, and media queries are instead added for modification on large devices.
Therefore, I don't understand why you have
(min-width: 100px). You should add w160 (as you have done), or the class you find best suited for mobile, and then add a media query for large devices, for example from iPad and up. I would do something like this:
@media screen and (min-width: 760px) {
.nav>div>.logo {
max-width: 320px !important;
}
}
For the above, the w160 class would set the logo to have
max-width: 160px by default, but on large screens (ipad up), the logo will be able to stretch to
max-width: 320px.
, but i already tried those configurations u mentionned, nothing works.