Skip to:
Content
Pages
Categories
Search
Top
Bottom

Use of !important in responsive.css causing problems

  • Profile photo of notpoppy
    notpoppy
    Participant

    @notpoppy

    I’m trying to make some changes to a child theme based on the Buddypress default theme.

    By default the WP Admin Bar is hidden below screen widths of 768px. I would like to reinstate it and have done so by adding the following to my theme:

    #wpadminbar {
    display: inline !important;
    }

    But responsive.css in the Buddypress default theme sets the following:

    body {
    margin-top: -28px !important;
    }

    This forces the header up underneath the wpadminbar when the screen is less than 768px wide. Because it is set as !important I cannot apply CSS to the body tag elsewhere that takes precedence over it.

    Why is the theme coded in such a way that makes customising it so tricky?

    My next attempt to make this work will be to add a 28px tall div at the top of the page only when the screen width is below 768px, but that’s an unsatisfying and clunky solution.

  • The topic ‘Use of !important in responsive.css causing problems’ is closed to new replies.