Hi,
I have an issue trying to align a modal reveal panel to the right side of the viewport. The page in question can be found here:
http://www.artinso.com/orphelion_testing/members.html

What I try to do:

• Each member card is in a Flexbox container and also contains a modal reveal with an ID.
• When revealing the modal, it shall stick to the right side of the VP with different widths depending on VP size
• To achieve this I select position:fixed, right:auto, left:variable VW values depending on breakpoint and Width: auto. That way I am in control of the portion of VW that is covered.

Unfortunately, the modal insists to move to the VP centre. What am I missing? I have been going over this for days, but don't seem to go further.

Another thing that bothers is that the sliding in works well, but it does not slide out completely.

Thanks for your help
Berthold

The Modal has a left: px being applied inline through the scripts.
Try some css

You may need to adjust the right to your needs.

Hi Eric,
Thanks for the help!
So, that would have to be done manually after exporting, right? Or can I apply !important in RSD?
In any case, I want to have the modal sit on the right side of the viewport.

The idea was to give for example at 640px Breakpoint the following style:
• left:40vw right:auto
  
  At 1024px breakpoint:
• left: 60vw
  etc.

I could do it also via width and maxwidth, but it seems more logical to do it via positioning and let the browser do the math.

Is there an alternative to using a modal for what I am trying to accomplish?
Thanks again
Berthold

It should be possible to add the styling that Eric posted in the head sction of the 'settings' tab. Make sure you put <style> </style> around it.

OK. Thanks!
That obliges me to assign the modal width via
[*] width and maxwidth
correct?
Whatever inline style is in the head section superseeds the cascade?
Thanks

You might be able to use a "read more" like I did on this example for someone a while ago?
http://gordw.com/rsd/test/hover/
That's using foundation.

Good, thanks Erik and Inger. With the code in the head it works now and I set a global value of max-width: 35rem which is a good compromise and keeps it full-screen on smaller devices. right:0% keeps it flush to the right side.

Yes, I thought about using a read more.. like option, but the text length I need to accomodate is quite substantial and the modal is more elegant.

Thanks again! I was getting quite crazy about this
Berthold