I am having issues with my Wordpress website. Whenever I use the following CSS. my website crashes on the mobile version (but not on the computer) "A problem repeatedly occurred on https://..."
.about-text .iwt-text { font-size: 16px; line-height: 1.38; max-width: 245px;}#js { display: none !important;}.about-text .iwt-icon img { width: 19px; height: 23px; margin-top: 3px;}.about-heading { text-transform: uppercase; margin: 0 0 5% 0% !important;}.header { padding-top:40px; padding-bottom:30px;}.header h1 { color:#000640;}/** SPEAKERS **/#speaker h2 { font-size: 36px; font-weight: normal; line-height: 1.11; margin-bottom: .5em; letter-spacing: 2px; color: #000640;}@media (min-width: 1000px) { #speaker h2 { font-size: 120px; font-weight: bold; line-height: .67; position: absolute; bottom: 4px; margin: 0; margin-left: -7rem; letter-spacing: 7.54px; opacity: .44; color: #dee0f1 !important; } #speaker h3, #speaker h1, #speaker p { color: #fff !important; } #speaker h3 { margin-top: 3rem; } #speaker p { margin-bottom: 7rem !important; } #speaker .row-bg-wrap::after { position: absolute; top: 0; left: -35vw; display: block; width: 123vw; height: 100%; content: ''; background: url(https://albertablockchain.com/wp-content/uploads/2020/01/group-1219.svg) center / cover no-repeat; } #speaker { margin-top: 4rem; } #speaker img { margin-top: -4rem; }}#speaker h3 { margin-bottom: 20px;}#speaker h1 { font-size: 34px; font-weight: bold; margin-bottom: 35px; letter-spacing: 1.5px;}@media (min-width: 1000px) { #speaker p { max-width: 414px; margin-bottom: 15%; }}div.speaker-line img { width: 100%;}div.single-speaker { display: flex; flex-flow: column; justify-content: space-between; height: 100%; padding: 1.5rem;}div.single-speaker div.top { display: flex; align-items: flex-start;}div.single-speaker div.top img { width: 82px !important;}@media (max-width: 1000px) { div.single-speaker div.top { flex-flow: column; }}div.single-speaker img { width: auto; margin-right: 1.5rem;}div.single-speaker img + div > p { padding: 0;}div.single-speaker p { line-height: 1.57; color: #333;}div.single-speaker a { font-size: 12px; line-height: 1.83; color: #3c4bd8;}div.single-speaker h2 { font-size: 16px; line-height: 1.56; margin-top: 1em; letter-spacing: 1.07px; color: #142098;}div.popup-trigger { cursor: pointer; transition: box-shadow .3s ease-in-out; box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27) !important;}div.popup-trigger:hover { box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7) !important;}div.popup-trigger div.vc_column-inner > div.wpb_wrapper { display: grid; grid-template-rows: auto 1fr; height: 100%;}div.popup-trigger div.wpb_raw_code > div.wpb_wrapper { height: 100%;}/** SPEAKERS GRID */.speakers { display: grid; gap: 1.5rem;}.speakers .item { display: grid; grid-template-rows: auto 1fr; transition: box-shadow .3s ease-in-out; border-radius: 4px; background: #fff; box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27);}.speakers .item.trigger { cursor: pointer;}.speakers .item:hover { box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7);}.speakers .item .img img { width: 100%; margin: 0;}@media (min-width: 1000px) { .speakers { grid-template-columns: repeat(3, 1fr); }}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .speakers { display: flex; flex-wrap: wrap; } .speakers .item { display: flex; flex-flow: column; flex-basis: 30%; }}.speaker-modal { position: fixed; z-index: 9999; top: 0; left: 0; display: flex; width: 100vw; height: 100vh; transform: scale(0); pointer-events: none; background: #fff;}.speaker-modal.active { transform: scale(1); pointer-events: all;}.speaker-modal .modal-image img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top;}.speaker-modal div.modal-left { overflow-y: auto; max-height: 100%; padding: 6rem;}@media (min-width: 1000px) { .speaker-modal > div { flex-basis: 50%; } .speaker-modal div.modal-left { display: flex; align-items: flex-start; flex-flow: column; justify-content: center; }}@media (max-width: 1000px) { .speaker-modal div.modal-image { max-height: 50vh; }}.speaker-modal div.modal-left::-webkit-scrollbar { width: 0;}.speaker-modal .js-close-modal { position: absolute; top: 3rem; right: 3rem; display: flex; align-items: center; justify-content: center; width: 51px; height: 51px; content: ''; cursor: pointer; border-radius: 100%; background: #fff;}.speaker-modal .js-close-modal::after { position: absolute; display: block; width: 25px; height: 25px; content: ''; background: url(https://albertablockchain.com/wp-content/plugins/VC_Modal_Popup/img/cross.png) no-repeat center center; filter: brightness(0);}.speaker-modal div.modal-left img { width: 164px !important; object-fit: contain;}.speaker-modal div.modal-left h2 { font-size: 20px; line-height: 1.25; margin-bottom: .5em; letter-spacing: 1px; color: #142098;}.speaker-modal div.modal-left a { font-size: 12px; line-height: 1.83; color: #3c4bd8;}.speaker-modal .modal-social { display: flex; align-items: center;}.speaker-modal .modal-social i { font-size: 20px; color: #142098;}@media (max-width: 1000px) { .speaker-modal { flex-flow: column-reverse; } .speaker-modal div.modal-left { padding: 1.5rem; } .speaker-modal .js-close-modal { top: 1.5rem; right: 1.5rem; }}And when I go to change the code from overflow y 'auto' to overflow y 'hidden' it starts working again. The only thing is that I need it to be auto, because I have a modal popup that comes up
