VEC Template Edits

[KatieMa14]

Hi, I am using the lightbox target experience template and can't figure out what part of the code needs to be edited in order to have the blue box have more space on the top and bottom. I have tried changing the 42px (in orange below) but that does not change anything. Does anyone have any ideas? 

<script>
// Lightbox
var att_config = {
// =========================== USER DEFINED CONFIGURATION ===========================
// Removed for space //
// =========================== END USER DEFINED CONFIGURATION ===========================
};
(function(){"use strict";var title=null!=att_config.title&&att_config.title?att_config.title:"",subtitle=null!=att_config.subtitle&&att_config.subtitle?att_config.subtitle:"",buttonText=null!=att_config.buttonText&&att_config.buttonText?att_config.buttonText:"",buttonLink=null!=att_config.buttonLink&&att_config.buttonLink?att_config.buttonLink:"",declineText=null!=att_config.declineText&&att_config.declineText?att_config.declineText:"",template='\n<div id="att_lightbox">\n <div class="att_lightbox_background"></div>\n <div class="att_popup">\n <div class="att_lightbox_left">\n </div>\n <div class="att_lightbox_right">\n <div class="att_lightbox_right_contents">\n <h1 class="att_lightbox_header">'+title+'</h1>\n <p class="att_lightbox_subhheader">'+subtitle+'</p>\n <a href="'+buttonLink+'" class="att_lightbox_button" rel="nofollow noopener">'+buttonText+'</a>\n <a id="att_lightbox_close" href="#">'+declineText+"</a>\n </div>\n </div>\n </div>\n</div>\n",bgImage=null!=att_config.imageUrl&&att_config.imageUrl?"background-image: url("+att_config.imageUrl+");":"",style="\n#att_lightbox {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1000;\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 0;\n}\n.att_lightbox_background {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: black;\n opacity: 0.75;\n z-index: 1000;\n margin: 0;\n padding: 0;\n}\n.att_popup * {\n font-family: Helvetica, Arial, sans-serif;\n}\n.att_popup {\n max-width: 800px;\n max-height: 500px;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n z-index: 1001;\n border-radius: 1px;\n}\n.att_lightbox_left {\n max-width: 540px;\n width: 100%;\n height: 100%;\n background-color: white;\n "+bgImage+"\n background-size: auto 100%;\n background-position: center;\n}\n.att_lightbox_right {\n background-color: white;\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.att_lightbox_right_contents {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 20px;\n height: calc(100% - 40px);\n width: calc(100% - 40px);\n}\n.att_lightbox_header {\n text-align: center;\n font-size: 32pt;\n color: #221E1F;\n margin: 0;\n padding: 1rem;\n line-height: 1.35;\n}\n.att_lightbox_subhheader {\n font-size: 14pt;\n text-align: center;\n color: #221E1F;\n line-height: 1.35;\n margin: 20px 30px;\n padding: 0;\n}\n.att_lightbox_button {\n height: 42px;\n width: auto;\n min-width: 80%;\n background-color: #4CAF50;\n color: white;\n border-radius: 2px;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 11pt;\n margin: 10px;\n}\n.att_lightbox_button:hover {\n background-color: #388E3C;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button:active {\n background-color: #4CAF50;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button[disabled=disabled],\n.att_lightbox_button:disabled {\n background-color: #D8D8D8;\n text-decoration: none;\n}\n#att_lightbox_close {\n font-size: 12pt;\n color: #4A4A4A;\n text-align: center;\n text-decoration: none;\n margin: 10px;\n font-weight: 300;\n}\n#att_lightbox_close:hover {\n text-decoration: underline;\n}\n@media (max-width: 801px) {\n .att_popup {\n margin: 20px;\n }\n .att_lightbox_left {\n display: none\n }\n}\n",handlers=function(){var t=null!=att_config.delay&&att_config.delay?att_config.delay:5;function n(){document.getElementById("att_lightbox").style.display="none"}!1!==att_config.delay&&setTimeout(function(){att_config.fired||(document.getElementById("att_lightbox").style.display="flex",att_config.fired=!0)},1e3*t),document.getElementById("att_lightbox_close").addEventListener("click",function(t){t.preventDefault(),n()}),document.querySelector(".att_lightbox_background").addEventListener("click",function(t){att_config.clickBackgroundToClose&&(t.preventDefault(),n())})};injector({template:template,style:style,handlers:handlers});
"use strict";function injector(e){var t=null!=e.el&&e.el?e.el:document.body,l=document.createElement("div");e.templateClass&&l.classList.add(e.templateClass),l.innerHTML=null!=e.template&&e.template?e.template.replace(/(\r\n\t|\n|\r\t)/gm,""):"",t.appendChild(l);var n=document.createElement("style");n.innerText=null!=e.style&&e.style?e.style.replace(/(\r\n\t|\n|\r\t)/gm,""):"",document.head.appendChild(n),null!=e.handlers&&"function"==typeof e.handlers&&e.handlers()}})();
</script>

[kandersen]

Hi @KatieMa14 ,

Have you tried to edit these two?

.att_lightbox_button {
  height: 42px;
  width: auto;
  min-width: 80%;
  background-color: #4CAF50;
  color: white;
  border-radius: 2px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11pt;
  margin: 20px 10px; /* <- try to update this line */
}
...
.att_lightbox_right_contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 40px 20px; /* <- or this one*/
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

Hope this helps!