search

openeuropa / bootstrap-component-library

Openeuropa Bootstrap Component Library
https://oelibrary.netlify.app/
MIT License
14 stars 9 forks source link

Banner content is hidden #562

Closed Aporie closed 9 months ago

Aporie commented 9 months ago

Hello,

I don't know if this happens on other projects, but looking at the css I wonder if there isn't an issue.

After update to the last version of bcl, the banner only displays a gray block: image

While there is of course data in it: image

It seems the "after" is purposely set to override the banner content ... https://github.com/openeuropa/bootstrap-component-library/blob/development/src/themes/default/src/scss/_banners.scss#L41

&.bg-lighter {
      position: relative;
      &:after {
        background: $lighter;
        content: "";
        height: 100%;
        left: 50%;
        position: absolute;
        top: 0;
        width: 100vw;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }
    }

I don't see how this could not result in hiding whatever is in the .bcl-content-banner ...

Proposed solution:

Do this on the :before or apply the background on the bcl-content-banner which is set to be 100vw and centered.

brummbar commented 9 months ago

Tried together during the call, cannot reproduce.