Support » Theme: Mantra » mobile-styles.css overrides custom CSS

  • Resolved pstoaks


    This problem is with Mantra 2.0.1. I am using a lot of custom CSS (input into the Mantra Settings -> Miscellaneous Settings CSS box) to customize the look and feel of my Mantra site. Overall, it’s working the way I need it to, but when Mantra transitions into “Mobile” mode, style-mobile.css trumps my settings, keeping me from customizing the behavior without modifying either the PHP or the mobile-styles.css file. In a few cases I’ve been able to overcome this by creating a more specific selector, but I have several cases where this isn’t possible.

    Is mobile-styles.css loaded by JS after the page is loaded? Is that why it wins all the time? I need some workaround. If the only answer is “hack the theme PHP or CSS files”, so be it. It won’t be the first time, I’m just wanting to avoid that for all the obvious reasons.


Viewing 6 replies - 1 through 6 (of 6 total)
  • My mistake. Just another nuance of CSS (the !important qualifier screwed me up.)

    Did anybody else read ‘!important’ as NOT important?

    Obviously the developers of the CSS spec were not ‘C’ programmers, or they would have put the exclamation point at the end! 🙂 Sheesh, I feel old.

    Moderator Andrew Nevins


    lol 🙂

    The mobile CSS is loaded in the footer of the page, to make sure the mobile styling is the absolutely last one that applies so you can’t break responsiveness with absolute sizes unless you really want to 🙂

    actually I’m having the same problem that you had,
    but I didn’t figure out how did you solve it.

    I did mantra-child theme which I have inside style-mobile.css
    but when i’m in mobile mode the style-mobile.css which load is from the father theme and not the child theme.

    how can i change it to load style-mobile.css from mantra-child. ?

    Thanks in advanced.
    Yehonatan Naim.

    Moderator Andrew Nevins


    Please create a new thread here:

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘mobile-styles.css overrides custom CSS’ is closed to new replies.