Hi, I try to make a modal fullscreen. I watched Eldar’s tutorial, but whatever I do there is always a small edge left, right, top and bottom shining through, even when adjusting the modal-content class. Plus, even with horizontal ‘auto’ margin adjusted, it is not even centered properly. Why is it not fullscreen exactly in the same way like a lightbox?
I need a totally full-screen modal. Help.
@Norm
This is strange to leave a small edge around the modal. It would be better if it is true 100% width and height and if someone needs it smaller to use the method Eldar suggested in his tutorial (changing the bootstrap class: modal-content).
Blocs titles the size adjustment for a modal “Fill Screen”, which is odd. Why is it not called Fullscreen? Is this on purpose that Fill Screen is less than Fullscreen? What a confusing naming.
Hi @StFoldex
You can over-ride 2 Modal classes to remove that gap on the full screen modal. Add them to the Class Editor.
.modal-dialog
Set this one to max-width: 100% then set height 100% and finally set all margins to 0
.modal-content
Set the height to 100%
NOTE: This will effect all Modals on the page, you can target specific ones with classes though.
1 Like
Thanks very much @PeteSharp. I will try this and then report back.
Hi @PeteSharp,
thanks for the help. Sorry for my late reply. I need to finish the production of three songs and I’m already behind because of the website related problems.
Yes, it worked, but not exactly as you described. The most important thing nevertheless, is the bootstrap class “.modal-dialog”. I hope that my finding with the help of @PeteSharp will provide a solution for anyone who needs a total Fullscreen modal.
However, what I have not found out yet is, how to make the contents of the modal behave like a normal content (outside of any modal). Unfortunately the content within a modal (DIVs, rows, especially more than 1 column) does not behave at all as fluid and responsive as they are to be logically expected.
@PeteSharp, your way in a newly created Blocs project resulted in the LG and MD breakpoints with the desired results.
However, in the SM and XS breakpoints there was still an edge on the right side.
When I used your values in my actual project it then showed in all breakpoints the gap on the right side. I don’t know what caused this.
After a lot of trying I found out that it only worked perfect in all breakpoints with Min vw=100 and Min vh=100 in the bootstrap “.modal-dialog” class. Only then the modal is truly Fullscreen!
To create the sharp edge corners (as opposed the round ones) you have to type 0 into the bootstrap “.modal-content” class (thanks to @Eldar for his tutorial).
1 Like
Good to know @StFoldex, I didn’t look at the smaller breakpoints.
Great it’s sorted.
1 Like
