Q:

LightningStyleSheets Attribute

In my VF page I am using lightningStyleSheets=true attribute to make it look like lightning experience. There also is a layover in the same page, which shows up  on a button click and looks like a pop-up. This popup behavior is accomplished using the method described in the best answer at: https://developer.salesforce.com/forums/?id=906F000000097X9IAI
However as far as responsiveness, the main VF page is responsive, due to lightningStyleSheets=true attribute setting, but the layover is not responsive.
How can this be achieved? The layover is using it's own style sheet to get it's layover nature, is that causing the problem?
Any suggestions?

A:

The CSS classes for modals are documented in Lightning Design System - Modals page and the widths of those modals are based on the width of the underlying page.
I don't know that when lightningStyleSheets=true is applied those modals will work: I suggest you try and see. This Trailhead Render a Visualforce Page Conditionally for the User Interface shows how to make such additions conditional if that becomes necessary.
Or you could try to fix the CSS you link to that has a hard coded width: 500px;. But some CSS can be quite tricky to get right as the obvious things (e.g. width: 60% in this case - try that too) don't work without lots of other changes.

