Responsive

[Borisboky]

Is there any way to make it responsive? I want for example that the width on large screens is 40% and on xs screens 100%.

Thanks.

[michelsch]

It worked for me by setting the className to a css class of your choosing, and setting the width as !important for all your desired breakpoints

[josuemontano]

Adding to @michelsch92 answer, I borrowed Semantic UI's modal rules and applied them to boron modal's:

@media only screen and (max-width: 767px) {
  .large.boron-modal,
  .medium.boron-modal,
  .small.boron-modal {
    width: 95% !important;
  }
}

@media only screen and (min-width: 768px) {
  .large.boron-modal,
  .medium.boron-modal {
    width: 88% !important;
  }

  .small.boron-modal {
    width: 70.4% !important;
  }
}

@media only screen and (min-width: 992px) {
  .large.boron-modal {
    width: 1020px !important;
  }

  .medium.boron-modal {
    width: 850px !important;
  }

  .small.boron-modal {
    width: 680px !important;
  }
}

@media only screen and (min-width: 1200px) {
  .large.boron-modal {
    width: 1080px !important;
  }

  .medium.boron-modal {
    width: 900px !important;
  }

  .small.boron-modal {
    width: 720px !important;
  }
}

@media only screen and (min-width: 1920px) {
  .large.boron-modal {
    width: 1140px !important;
  }

  .medium.boron-modal {
    width: 950px !important;
  }

  .small.boron-modal {
    width: 760px !important;
  }
}