SOLVED: Bricks popups scrolling horizontally

[MetaWebIT]

I have a really strange problem in Bricks: the chapter 49 and some other pop-ups, when I press the Read button, scroll from side to side, even though I’ve set them as 100% width and maximum width on mobile. My customer is having a terrible time with them, and I’m trying to figure out why they are scrolling horizontally when they shouldn’t be. Does anyone know why or have a solution, please? Book 5 – Looms and Lovers | Morley Grainger

[wplit]

Two issues causing it..

• The margin-left:50% and margin-right: 50% on the icon at the top in the popup.
• And the text element at the very bottom with the large text, needs overflow-wrap: anywhere; to prevent the wikipedia URL from sticking out to the right of the content.

[MetaWebIT]

Thanks, on the popup container, what could I use instead of margin settings to centre the icon …or should I move it into the section parent?
Fixed the icon by making it 100% width. I’ll re-create the 4 popups from scratch and see how they go then.

[timmse]

You could use either align-items: center on the container, or align-self: center on the icon.
The bigger problem, however, is the fairly long links that don’t wrap/break, which could be solved by applying word-break (and optionally hyphens) to the a’s.