Modal Background

Using the subclass modal-fill, I was able to create a completely white background filling the whole screen. Or almost.

I was wondering if there were any way to get rid of the dark borders that are most evident in the smaller sizes.

Thanks in advance.

Not sure why Blocs uses .modal-fill @norm ? When there is a BS class for full screen modals. .modal-fullscreen. Unfortunately, we can’t select the right part of the markup in the layer tree to add it.

With .modal-fill, you can adjust the max-width to 100% to remove the gap horizontally. The vertical gaps can be removed by adjusting .modal-content.

You might have to set a margin 0 on .modal-dialogue also ? It’s been a while. So just from memory.

Hi Pete, thanks for the feedback. Here’s my feedback to your feedback.

That worked for the first three sizes, but not for XS. Voilà.

What would I adjust in .modal-content to remove the vertical gaps? I tried max-vertical, but that didn’t work.

I set top and bottom margins to 0 alternatively in both .modal-fill and.modal-dialogue with the same result. To whit:

The top area was effectively addressed, but not the bottom in MD, and the other 3 sides in XS.

I’m not in blocs at the moment. But it would be easy if Blocs just used the proper utility class here :grin: