Modal responsive phone

Good afternoon.

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)

You can see this in the video Video Modal Responsive phone

Any solution so that the Modal size does not fit so much to the margins of the phone screen ??

Thank you

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.


Thanks @casey1823 for your time answering my question.

I’ll try the options you mention and I’ll tell you how the Modal works.

Greetings Casey

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

Thank you for your cooperation @Casey1823

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?

Good Luck

1 Like

I think the PNG image does not influence, I have tried with a JPG image and the problem is the same.

Thank you.