Text extending beyond Editor in Layout Builder

Hi Jean

The problem looks to be:

.panel-widget-style {
    min-width: 300px;
}

As an example, this text is in a panel-widget-style div:

Learn more about the Active Optical Module from…

It’s breaking out of it’s container because it needs to fulfil its min-widthrule.

Hello Andrew
Strangely enough the problem seems to have disappeared from all the pages that had it… But this Layout builder box had always given me intermittent trouble.
How can we solve this issue for good without breaking anything else ?
Should I just add something like:
.panel-widget-style {
min-width: 200px;
}

to it my Custom css. I am fearfully of widespread effects…

The paragraph in question is natively about 160px wide. You could get more specific and use widget classes to only add this declaration when you need it. But yes, decreasing it a bit would help this particular issue.

I’ll try this.

Super. Hopefully it helps.

I have appended a widget class to all the relevant text boxes and have set max-width and padding values to it. It seems to work.
I also tried to apply background color without effect… Can it be done ?

Sure. I’m not seeing it. Can you let me know the class name and where I should be looking for it? Thanks.

Widget class is
.application-callout

it is found here: https://reflexphotonics.com/applications/active-optical-module/
(text frame: Learn more about the Active Optical Module…)

Thanks, so you can just add a background color to that class:

background: red;

And add some padding:

padding: 10px;

Hello Andrew
Sorry, I am mixing two problems here…
I am having problem styling a button (CodeLight Modal Popup) with css. I’ll ask CodeLight about it.
Many thanks.
I consider this issue resolved.

Ahh my bad. Sorry about that. Sure, if you don’t come right, please, come back to me and I’ll take a look. Cheers for now.