Modals Overlap When Screensize Reduced

[artthescience]

Hello.

What do I need to adjust and where to make sure that each modal does not overlap as the screensize is reduced?

See images.

Thank you

[ruenel]

Hello There,

Thanks for writing in! This is the result of the minimum width and the width you have set for the modal toggle. To resolve this, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 768px) and (max-width: 979px){
  .x-column .x-anchor.x-anchor-toggle {
    min-width: 50% !important;
    width:  100%;
  }
}

We would loved to know if this has work for you. Thank you.

[artthescience]

Thank you for helping.

The code helps with the row of 3 but not 4 elements.

My bigger problem is that I don’t understand the settings for the modal dimensions or how to manipulate them to get the look and function I want.

I would like to set up 4 modals in one row and have them occupy the full width and height of each column so that they are right next to each other in a grid (like an essential grid look below) and size properly as the screen width is reduced. Is this possible with modals? Also is there a way to add an arrow such that the next modal can open?

Thank you

[ruenel]

Hello There,

Thanks for updating in! If you do not want spaces in between the columns, you may enable the marginless columns option in the row settings and then update the css and use this:

@media(min-width: 768px) and (max-width: 979px){
  .x-column .x-anchor.x-anchor-toggle {
    min-width: 100% !important;
    width:  100%;
  }
}

Hope this helps. Please let us know how it goes.