title: How can I resize modals?
body: <p>I'm building a christmas calender with pop up windows that open after specific dates and have a bit of text and an image in. They are all the same size. After many weeks of trial and error, I've finally managed to change the pop up windows into modal boxes on my website. I'm using a Tingle jquery plugin. However, I'm finding it impossible to get the modals to resize width/height, regardless of what .css I try. </p>
  
  <p>HTML code of the main company site (where the calender is placed in an iframe):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Christmas Calender&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  &lt;iframe src="calendercode.html" title="Christmas Calendar 2018" width=980 height=650 frameborder=0&gt;
  &lt;/iframe&gt;
  &lt;/center&gt;
  
  &lt;!-- Button to return to Entrance room --&gt;
  &lt;center&gt;
      &lt;p&gt;&lt;a href="entranceroom.html"&gt;&lt;img src="cogarrowleft.png" alt="Room1" width=97 height=97 border=0&gt;&lt;/a&gt;
  &lt;/center&gt;
  
  &lt;!-- Company Logo --&gt;
  &lt;center&gt;
      &lt;a href=""&gt;&lt;img src="logo.png" alt="Logo" width=40 height=40 border=0&gt;&lt;/a&gt;
  &lt;/center&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>HTML code for the calender itself:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Christmas Calender&lt;/title&gt;
      &lt;link rel="stylesheet" href="calendermain.css"&gt;
      &lt;link rel="stylesheet" href="calenderwindow.css"&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.13.2/tingle.min.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
  function createModal() {
      return new tingle.modal({
      footer: false,
      stickyFooter: false,
      closeMethods: ['overlay', 'button', 'escape'],
      closeLabel: "Close",
      cssClass: ['custom-class-1', 'custom-class-2'],
      });
  }
  
  function createUrlModal(url) {
      var newModal = createModal();
      newModal.setContent('&lt;iframe src="' + url + '"&gt;&lt;/iframe&gt;');
      return newModal;
  }
  
  function createTextModal(text) {
      var newModal = createModal();
      newModal.setContent('&lt;h1&gt;' + text + '&lt;/h1&gt;');
      return newModal;
  }
  
  function openModal(textOrUrl) {
      var modalToOpen = textOrUrl.indexOf('html') &gt; -1 || textOrUrl.indexOf('.com') &gt; -1 ?
      createUrlModal(textOrUrl) :
      createTextModal(textOrUrl);
  
    modalToOpen.open();
  }
  
  function dooropen(door) {
      today = new Date();
      daynow = today.getDate();
      monthnow = today.getMonth();
  
  // Date controls de-activated for testing purposes. Before launch, remove /* from the start of the below 'if' statements. This ensures the calendar can't be used pre-Dec/post-Jan and doors cannot be opened early.
  
  /*  if (monthnow != 11 &amp;&amp; monthnow != 0) {
  openModal("This calender unlocks in December. Please come back then.");
  return false;
  }
  if (daynow == door - 1) {
  openModal("Come back tomorrow to see what's behind the door!");
      return false;
  }
  if (door &gt; daynow) {
  openModal("You\'ll have to wait " + (door - daynow) + " days before this door will unlock!");
  return false;
  }                                    */
  
  oNewWindow = openModal(urlsarray[door]);
  }
  
  urlsarray = new Array();
  widtharray = new Array();
  heightarray = new Array();
  scrollbarsarray = new Array();
  
  var x = 285;
  var y = 50;
  var rows = 6;
  var cols = 4;
  var spacinghoriz = 120;
  var spacingvert = 100;
  
  urlsarray[1] = "1.html"; widtharray[1] = "420"; heightarray[1] = "550";
  urlsarray[2] = "2.html"; widtharray[2] = "420"; heightarray[2] = "550";
  urlsarray[3] = "3.html"; widtharray[3] = "420"; heightarray[3] = "550";
  urlsarray[4] = "4.html"; widtharray[4] = "420"; heightarray[4] = "550";
  urlsarray[5] = "5.html"; widtharray[5] = "420"; heightarray[5] = "550";
  urlsarray[6] = "6.html"; widtharray[6] = "420"; heightarray[6] = "550";
  urlsarray[7] = "7.html"; widtharray[7] = "420"; heightarray[7] = "550";
  urlsarray[8] = "8.html"; widtharray[8] = "420"; heightarray[8] = "550";
  urlsarray[9] = "9.html"; widtharray[9] = "420"; heightarray[9] = "550";
  urlsarray[10] = "10.html"; widtharray[10] = "420"; heightarray[10] = "550";
  urlsarray[11] = "11.html"; widtharray[11] = "420"; heightarray[11] = "550";
  urlsarray[12] = "12.html"; widtharray[12] = "420"; heightarray[12] = "550";
  urlsarray[13] = "13.html"; widtharray[13] = "420"; heightarray[13] = "550";
  urlsarray[14] = "14.html"; widtharray[14] = "420"; heightarray[14] = "550";
  urlsarray[15] = "15.html"; widtharray[15] = "420"; heightarray[15] = "550";
  urlsarray[16] = "16.html"; widtharray[16] = "420"; heightarray[16] = "550";
  urlsarray[17] = "17.html"; widtharray[17] = "420"; heightarray[17] = "550";
  urlsarray[18] = "18.html"; widtharray[18] = "420"; heightarray[18] = "550";
  urlsarray[19] = "19.html"; widtharray[19] = "420"; heightarray[19] = "550";
  urlsarray[20] = "20.html"; widtharray[20] = "420"; heightarray[20] = "550";
  urlsarray[21] = "21.html"; widtharray[21] = "420"; heightarray[21] = "550";
  urlsarray[22] = "22.html"; widtharray[22] = "420"; heightarray[22] = "550";
  urlsarray[23] = "23.html"; widtharray[23] = "420"; heightarray[23] = "550";
  urlsarray[24] = "24.html"; widtharray[24] = "420"; heightarray[24] = "550";
  
  var doorno = 1;
  for (h = 0; h &lt; rows; ++h) {
  for (g = 0; g &lt; cols; ++g, ++doorno) {
      document.write('&lt;a class="button" onClick="dooropen('+doorno+');" href="#" style="position: absolute; left:'+(x+(g*spacinghoriz))+'px; top:'+(y+(h*spacingvert))+'px;"&gt;'+doorno+'&lt;/a&gt;');
      }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code for the calender windows/modal boxes:</p>
  
  <pre><code>/* The modal boxes */
  .tingle_modal-box * {
      width: 500px;
      height: 100%;
  }
  
  iframe {
      width: 100%;
  }
  
  .tingle-modal-box__content {
      padding: 0!important;
  }
  
  /* Pop up calender windows */
  body {
      background-color: black;
      color: white;
      text-align: center;
      text-decoration: none;
      font-family: sans-serif;
  }
  
  .image {
      padding-top: 20px;
      padding-bottom: 30px;
  }
  
  .text {
      padding-bottom: 30px;
  }
  </code></pre>
  
  <p>CSS code for the main calender:</p>
  
  <pre><code>body {
      background-image:url(calenderback.png);
      background-repeat: no-repeat;
      background-size: cover;
  }
  
  .button {
      color:#ffffff; /* text colour on the doors */
      width:40px;
      text-align:center;
      margin:3px;
      font-family:sans-serif;
      font-size:large;
      padding:3pt;
      border-width: 0pt;
      border-style:outset;
      text-decoration:none;
  }
  
  .button:hover {
      color:#ffffff; /* text colour on the door when moused over */
      /* background-color:#000000; &gt; add additional background colour to doors when moused over */
      width:40px;
      text-align:center;
      margin:3px;
      font-family:sans-serif;
      font-size:x-large;
      padding:3pt;
      border-width: 0pt;
      border-style:outset;
      text-decoration:none;
  }
  </code></pre>
  
  <p>HTML code for an individual calender window (they are all similar to this with different images/text:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Christmas Calendar&lt;/title&gt;
      &lt;link rel="stylesheet" href="calenderwindow.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  
  &lt;div class="image"&gt;
      &lt;img src="exampleimage.gif" alt="Image" width=155 height=189 border=0&gt;
  &lt;/div&gt;
  
  &lt;div class="text"&gt;
      &lt;p&gt;Puzzle text...&lt;/p&gt;
  
      &lt;p&gt;_ _ _ _ _&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>