Css rules from Muffin options and style file work different for mobiles, why?

I've seen this problem a lot of times, but now want to understand - what's going on. The matter is as follow and mostly about mobile devices : if I make an adaptive design and using rules @media screen and (min-width: 1220px) and (max-width: 1359px) everything is fine. But when I chose the dimension for example:  @media screen and (min-width: 321px) and (max-width: 480px)  STARTS miracles )
1. At the desktop monitors all is working fine as should be.
2. On mobiles - all different - some browsers like FF can show true. But Chrome - NEVER. It seems like it ignores the rules. Do not help any !important
3. The matter is NOT IN CACHE. It was cleared 100 times.
4. Attention - if I take the css code ( without ANY changings) and put it to Custom CSS in Muffin Options - wow - everything begins work as should be ) Chrome works perfect. But... only if css rules in Muffin options. And to put there a lot of rules - very inconvenient. How can I use child style.css?
Why does it happen?
with mobiles and Chrome
comes to ridiculous : #Header {min-height:130px !important;}. Works everywhere, but not in mobile Chrome. In Chrome - standard 450px from theme's css ) And only this string in Muffin Options custom Css section - yes, Chrome at once execute the command. Why? may be I need to use some class like .mobile?

Comments

  • HI,
    We do not what code are you using on your website and why it is not working, the theme customization is up to the user. If you want to use mobile css then use @media(max-width:767px)
    If you use 321px-480px then mostly nothing will change since almost all mobile devices have higher resolutions. If your css does not work then use !important
    thanks
  • Hm...
    "If you use 321px-480px then mostly nothing will change since almost all mobile devices have higher resolutions."
    may be some examples? About what phones are you talking? ) as far as I know to create correct media query we need to use Android DPI and Apple Points. I have the phone with physical resolution 1920x1080 and?... what - I have to use query @media (max-width:1080px) ???
    Ufff... a Lot of (mainly all) fullHD phones with 1920x1080px has 360x640 DPI. Some 420x800. And media query uses for mobiles THE DPI. (mainly 360-420 for all mobiles in portrait regime). Because the mobile browser will say - my width = 360 ( and it doesn't matter that it has really 1080x1920) - is this a news for you?
    But the question was about another thing- one css string, written in Custom CSS field of Be Options and the SAME string, written in custom css in Child theme: they have the equal (same) priority?


  • If we are talking about theme options>custom css&js>css then it is the same CSS. It does not matter because they both are the same record in database.
Sign In or Register to comment.