Skip to:

Use of !important in responsive.css causing problems

  • Avatar of 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.

You must be logged in to reply to this topic.