Modal Cut-off

[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

[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

[piranha]

Here is what the problem looks like - Thee CSS you suggested had no affect.

[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

[piranha]

Do you know where that Modal Window width is controlled?

[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