Menu icon Foundation
Reveal modal: reduce full width on small screen

How can I change reveal "Default on small is 100% (full) width" to, say, 80%?
I tried almost everything in "_setting.css". i added also classes like:

tiny: Set the width to 30%.
small: Set the width to 40%.
medium: Set the width to 60%.
large: Set the width to 70%.
xlarge: Set the width to 95%.

but they work only for medium up screen.

revealmodal

How can I change reveal "Default on small is 100% (full) width" to, say, 80%?
I tried almost everything in "_setting.css". i added also classes like:

tiny: Set the width to 30%.
small: Set the width to 40%.
medium: Set the width to 60%.
large: Set the width to 70%.
xlarge: Set the width to 95%.

but they work only for medium up screen.

Lyn about 5 years ago

Hey there,

Actually I think you could remove the "!important" part of it, this should work (even better since it currently would be disrupting other modal classes like "tiny", "small" and so on).
About scss, unfortunatly, I still didn't get any time to look at it so I can't help you with that.

Kind regards,

Lyn.

andrea tagliazucchi about 5 years ago

Hi lyn,
yes that works, even if i would prefer something done properly through scss and without !important.
thanks anyway

Lyn about 5 years ago

Hey there,

Did you simply try this css :

.reveal-modal {
    width: 80% !important;
}

Regards,

Lyn.