I have been applying everything I have found about Modal Bric and I have a problem that I can not solve.
I have used the solution of @Pealco so that the Modal is always displayed when loading the web page. And it works Ok.
The problem is that the Modal fits all sizes of devices, always leaving a space around.
But in the size for the phone the Modal adjusts so much to the margins of the screen that you can not click with your finger outside the Modal to continue navigating and not using the button of the Modal.
I have applied a class to both Row and Column, but the size of the Modal is always fixed and adjusted (responsive)
I had the problem with one that I used an image header. You can do a couple of things. Even adding a close button did not work. The close button was outside of the modal. I added a footer and put the close button in the footer. Another thing that worked for me is to create a class (on the whole modal with ID) Then on the small breakpoint give the modal a 25px padding on each side. This will allow you to touch outside the modal and close the modal. I really think the close button in the footer is the best solution.
Because the handle adds a closing button of the Modal, in position portrait of the phone, the button can not be displayed, I have decided to leave the X button of the Modal (top right) so that the user closes the Modal by clicking on the
I’ve found that sometimes on a smaller phone it still is not available to click in the top right. That’s why I added one to the footer in one of my sites. It might have to do that I used a transparent png image?