CSS in child theme for mobile not cascading

  • sarah97302

    (@sarah97302)


    13 years ago

    I have searched forum posts on this topic but my problem seems to be different. I am using a themeswitcher plugin to detect mobile devices and switch to a handheld theme or tablet theme when appropriate. The handheld and tablet themes are set up as children of the primary theme.

    Each child theme has a style.css file beginning

    /*
Theme Name: Theme name here
Description: Description here
Template: Name of the parent theme here
*/

@import url(URL of the parent theme's stylesheet here);

    and then all the child theme CSS.

    Each child theme has its own header file, and I’m using

    <link rel="stylesheet" href="(URL of the child theme's stylesheet)" type="text/css" />

    So this isn’t a problem with linking to the template directory’s stylesheet, as was the case with many others who asked this question previously in this forum. I’m also not using any caching plugins, and i’ve cleared cache and that has not resolved the issue.

    My child theme stylesheet is being loaded, and new styles are being applied correctly; it’s just that they aren’t overriding the parent theme styles if they were previously declared — the cascade isn’t working. It’s like the child styles are being loaded first somehow and then the parent styles are overriding them. The only way I can get the child theme styles to display correctly is to add !important; after every single line of css, which is obviously a lousy solution.

    Does anybody have any ideas about why this is happening?

Viewing 2 replies - 1 through 2 (of 2 total)
  • randomfrequency

    (@randomfrequency)

    Hi sarah,

    what is the themeswitcher plugins’ name???

    First off I am lost… on last statement
    “My child theme stylesheet is being loaded, and new styles are being applied correctly; it’s just that they aren’t overriding the parent theme styles if they were previously declared — the cascade isn’t working. It’s like the child styles are being loaded first somehow and then the parent styles are overriding them”

    Was this situation occuring on the desktop, on the tablet, or on the mobile?

    What style for what screen wasnt workin?

    Thread Starter sarah97302

    (@sarah97302)

    Themeswitcher plugin is Device Theme Switcher — however, the issue with the CSS is independent of the plugin, and was occurring before I installed it.

    The issue with CSS is in the mobile and tablet themes. Desktop theme is the parent theme and uses the primary style.css file. The mobile and tablet themes are the child themes, and their CSS files are not applying correctly. Every style in the mobile and tablet css that had been previously declared in the parent theme css is being overridden by the parent theme file.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS in child theme for mobile not cascading’ is closed to new replies.