Default template + sidebar widget has black band

  • Resolved Andrzej

    (@ukandrzej)


    7 years, 1 month ago

    When selecting the default template and adding a sidebar widget, the pages display fine on the desktop. However, on mobile there is a thick black band further down the page and media queries do not remove this.

    If I choose the widget not to show on that page using Jetpack widget visibility, the page displays fine on all devices but of course, there is no widget.

    Grateful for advice.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Andrzej

    (@ukandrzej)

    I have found out that this is the expected behaviour with Shoreditch. I have managed to remove this thick band with the following CSS:

    @media screen and (min-width: 350px) {
#secondary.widget-area {
    border-top: #ffffff !important;
    }
}

    @ukandrzej: You’re right that this is part of Shoreditch’s design.

    You could also use the following custom CSS as an alternative to what you’ve added above:

    .site-content-wrapper .widget-area {
    border-top: inherit;
}

    In the above, I’ve targeted the same classes that are styled within the theme’s style.css file. By doing this, it’s possible to override the theme’s style without using the !important command.

    I would discourage the use of !important in your custom CSS as it can create conflicts and make it hard to troubleshoot CSS-related issues.

    Let me know if that information helps or if you have further questions.

    Thread Starter Andrzej

    (@ukandrzej)

    That works very well. Additionally I did not need to use a media query with that.

    Many thanks for your help.

    Any time! Glad that helped. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Default template + sidebar widget has black band’ is closed to new replies.