NO BUG: It seems a fixed issue has been regressed

Bugs
1

Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

I was searching for a problem I’m having when I found this post

It suggests this issue has been solved, however, I’m having the same problem now. Has this been regressed? I’m having the problem now in release 2.1.4 I’m looking at the frontend-layer.min.css?ver=1762944543 and it has [class*=brxe-] {max-width: 100%;} which is breaking my site.

1 Like
2

The 100% max-width rule was never removed, it was just placed inside of the layer in the CSS so can be more easily overridden with less specific selectors.

For example, this is now possible..

p {
  max-width: 70ch;
}

which wasn’t before. It was always overridable with classes, but some people wanted it to have zero specificity so anything can override it.

"which is breaking my site"

I’m not part of the Bricks team, but just sharing the info. But if something is breaking on your site, I’d recommend pointing out which part as it may be something else causing it. (as mentioned this max-width has always been there for all Bricks elements). It’s not obvious from the URL shared which part is wrong.

edit - on a second look, i notice you’re using max-inline-size to set the max width for somethings, this may be what you’re referring to. in this case you’d also need to override the max-width otherwise they’ll both apply to the same element (max-inline-size and max-width are the same thing unless writing vertically)

3

Hi, thanks for this. Basically, if I remove the [class*=brxe-] {max-width: 100%;} my site works. I have a div with a grid in it, I change the width of the last column but nothing happens, when I turn off the above rule, it works.
It’s the Featured Speakers above the lorem text. The last element has a absolutely positioned box to act as a dummy border. The right-hand border is missing unless you turn off the rule.

The post I mentioned seemed to suggest exactly this problem and I thought it was ‘fixed’. Maybe I misunderstood. It has an inline-size and a block-size calcs to extend it’s height and width to behave like padding or gap.
As the 100% max-width is placed in a layer, I would have thought my css would have overridden it.

4

No, inline-size is just ‘width’ for horizontal writing mode, which you’re using. Not max-width.

I would just set the max-width to have the same value as you’re using for inline-size..

.main-hero__cutout {
    max-width: calc(100% + var(--content-gap));
}

That would give the same result.

(or override bricks’ default max-width globally to unset it)

5

Hi @LondonPete,

it’s best to post a link to the website, then we don’t have to guess what is happening :slight_smile:

Saying that, @wplit is spot on (thanks :folded_hands:) and that should override the max-width where you need it.

Best regards,
Matej

6

The link is there, the text for it is wrong, sorry

7

max-width doesn’t work. It has to have width as it’s an empty div. Obviously, width has the same problem as inline-size does. I’ll have to keep playing.

Thanks

8

I’m not sure exactly how it should look, but maybe try adding this:

.main-hero__cutout,
.main-hero__inner{
  max-width: unset;
}

Is it working ok?

9

This is how i meant with my suggestion - Komodo Screen Recorder

unset would also work (actually would be better as a way of removing the max-width, but in this specific case would give the same result)

(inline-size or width would still be needed, as you said, this is just for overriding the existing max-width:100%)

1 Like
10

Yes that worked, thanks