Page 1 of 1
Modal Cut-off
Posted: 14 Aug 2021, 18:34
by piranha
How do I make the modal pop-up (When adding a product to shopping cart) wider as the text is being cut-off, thanks. (ver 3.5.6)
** I did not attach a screenshot or url as I do not see a way to hide that information
Re: Modal Cut-off
Posted: 16 Aug 2021, 11:49
by Jan
Hi, yes, hard to say without having screenshot, what do you exactly mean, but usually, a popup is made by Bootstrap - so there are two ways to change the size:
- per customization in HTML
- or per CSS (if it is possible to do per CSS, it is recommended)
CSS: It depends on many factors, mostly on used Bootstrap library, on browser window size, etc. etc. So for example this code needs to be customized in own CSS:
Code: Select all
@media (min-width: 576px) {
.modal-dialog {
max-width: 600px;
}
}
Example of Bootstrap modal dialog for screens with min width of 576px.
Jan
Re: Modal Cut-off
Posted: 16 Aug 2021, 15:25
by piranha
Here is what the problem looks like - Thee CSS you suggested had no affect.
Re: Modal Cut-off
Posted: 18 Aug 2021, 16:48
by Jan
Hi, it looks like the font size is too large. So you can change the font size or set the size of the window to full window width or add some CSS overflow effect.
Jan
Re: Modal Cut-off
Posted: 18 Aug 2021, 21:01
by piranha
Do you know where that Modal Window width is controlled?
Re: Modal Cut-off
Posted: 22 Aug 2021, 12:20
by Jan
Hi, as written previously, this is managed by Bootstrap library, e.g.:
Code: Select all
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
So it is controlled in Bootstrap CSS and you can override it by your custom CSS.
Jan