Kienan

Hello, I followed a guide from will-myers.com to add tabs to my website. When I start adding my embed box, its one row thin, which is what I want. After I add in the html, it forces the embedded code box to be a size that I can't shrink. This is a problem because it adds a large gap when viewing on mobile. It also does some weird things on desktop but I primarily need this for desktop. How can I shrink the embed code box or how can I write this so it doesn't add this weird gap? Thanks! <div class="tabs-container"> <button class="tab-btn" id="tab-1" onclick="tabOneClick()"> Sponsors </button> <button class="tab-btn" id="tab-2" onclick="tabTwoClick()"> Events </button> <button class="tab-btn" id="tab-3" onclick="tabThreeClick()"> Map </button> </div> <!--Be sure jQuery is loaded on your site.--> <script> function tabOneClick() { $('button.tab-btn:nth-of-type(1)').addClass("active"); $('button.tab-btn:nth-of-type(2)').removeClass("active"); $('button.tab-btn:nth-of-type(3)').removeClass("active"); $('[data-section-id="6494a509aa00b76380ebb53f"]').addClass("tab-section-show"); $('[data-section-id="6494a519f5dabd3a76b5e0be"]').removeClass("tab-section-show"); $('[data-section-id="6494ab3656ab525f2e10a38a"]').removeClass("tab-section-show"); window.Squarespace.initializeLayoutBlocks(Y); } function tabTwoClick() { $('button.tab-btn:nth-of-type(1)').removeClass("active"); $('button.tab-btn:nth-of-type(2)').addClass("active"); $('button.tab-btn:nth-of-type(3)').removeClass("active"); $('[data-section-id="6494a509aa00b76380ebb53f"]').removeClass("tab-section-show"); $('[data-section-id="6494a519f5dabd3a76b5e0be"]').addClass("tab-section-show"); $('[data-section-id="6494ab3656ab525f2e10a38a"]').removeClass("tab-section-show"); window.Squarespace.initializeLayoutBlocks(Y); } function tabThreeClick() { $('button.tab-btn:nth-of-type(1)').removeClass("active"); $('button.tab-btn:nth-of-type(2)').removeClass("active"); $('button.tab-btn:nth-of-type(3)').addClass("active"); $('[data-section-id="6494a509aa00b76380ebb53f"]').removeClass("tab-section-show"); $('[data-section-id="6494a519f5dabd3a76b5e0be"]').removeClass("tab-section-show"); $('[data-section-id="6494ab3656ab525f2e10a38a"]').addClass("tab-section-show"); window.Squarespace.initializeLayoutBlocks(Y); } $(function() { $('[data-section-id="6494a509aa00b76380ebb53f"]').addClass("tab-section-hide"); $('[data-section-id="6494a519f5dabd3a76b5e0be"]').addClass("tab-section-hide"); $('[data-section-id="6494ab3656ab525f2e10a38a"]').addClass("tab-section-hide"); tabOneClick(); }); </script> .tabs-container{ transform:translateY(100%); width:100% !important; text-align:center; border-bottom: 1px solid #999; overflow: auto; overflow-x:auto; white-space: nowrap; z-index:99; font: black; } .tab-btn{ max-width:150px; display: inline-block; border-radius:3px 3px 0 0; border:1px solid #999; padding: 12px 18px; font-size:1.2em; background:white; margin-bottom:none !important; border:none !important; &:not(:first-of-type){ margin-left:10px; } } .tab-btn.active{ background:lightblue; } section.tab-section-hide{ display:none !important; } section.tab-section-show{ display:flex !important; }