Change width on a specific modal popup

API & Customization Ask Developers
1

Hi,

Does anyone know how to target a specific modal popup instead of every modal popups.
This works fine, but it’s on every modal.

.kn-modal {
width: 90%;
max-width: 1200px;
}

I have tried this, but it’s not working.

#scene_140 .kn-modal {
width: 90%;
max-width: 1200px;
}

2

Hi @Alteco

Try

.kn-modal:has(#kn-scene_140) {
 width: 90%;
max-width: 1200px;
}

Craig

3

That’s awesome Craig, it works perfectly. You have done it again, thanks :smiley:

/Claus

1 Like
4

The Pseudo class :has is great in Knack as you cannot add your own classes to elements. The :has means anywhere in its descendants so if you can add a span element with a class i.e.

<span class="width90"></span>

In a view description in the scene in the modal you could have this class in your CSS:

#knack-body .kn-modal:has(.width90) {. 
width: 90%;
max-width: 1200px;
}

You have something you can reuse in multiple modals.

Craig

5

Nice to know Craig, it makes sense :slight_smile:
Learning more and more everyday