Reduce white space under read more

https://pigeon-harp-fl3n.squarespace.com/ Password 123, 

 

I want to reduce the white space where I have the read more but am not sure how to do this thanks!

 

the javascript code: 

<div id="dots1"></div><div id="more1" class="showmore">
<p align="center">
  We understand how important it is for draft beverages to retain the flavor, aroma, and quality that consumers expect, delivering a consistent serving and a satisfying experience every time. We also know that you can’t afford the waste of skunky or sudsy beer. A quality commercial beer tap system ensures that every pull hits the glass or growler in perfect condition, preserving the hard work that went into the creation of each exceptional brew.
  Our talented team is adept at providing the unique, turnkey solutions you’re seeking, including custom design, build, and installation of needed equipment, as well as staff training and ongoing maintenance and service for your beverage system. We’re happy to develop a plan that works with your budget and available space, and we know time is money, which is why we proudly offer short lead times for products and installations. With a national network of experienced draft technicians, you could go from inception to installation in as little as about four weeks.
  </p>
<p align="center">
  Further, every draft beer system includes only the finest equipment, and we approach every project with the attention to detail you expect and the personal care every client deserves. Whether you’re interested in custom solutions for draft beer and wine bars, self-serve beer walls, or draft beer crowler and growler filling stations, we can offer advanced solutions designed to suit your specific needs, paired with a commitment to customer satisfaction that ensures long-term success.
  </p>

</div>
<button onclick="myFunction1()" id="myBtn1" class="btnreadmore">Read More →</button>

<style type="text/css">
.showmore {display: none;}
#dots1, #dots2, #dots3, #dots4, #dots5, #dots6, #dots7{display:none!important;}
.btnreadmore{
    color:#bc6124;
    font-size:12px; 
    padding: 0;
    border: none;
    background: none;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
</style>
<script type="text/javascript">
function myFunction1() {
  var dots = document.getElementById("dots1");
  var moreText = document.getElementById("more1");
  var btnText = document.getElementById("myBtn1");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read More →";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read Less ←";
    moreText.style.display = "inline";
  }
}
</script>

Edited March 1, 2023 by LindsEli
forgot photo

You password doesn't work, can you check it and repost? Thanks!

2 hours ago, Ziggy said:

You password doesn't work, can you check it and repost? Thanks!

the password is 123! just the numbers!

It looks like the code block height is too large, can you drag it to make it shorter?

8 hours ago, Ziggy said:

It looks like the code block height is too large, can you drag it to make it shorter?

No I have tried that! I need a css code 

14 minutes ago, LindsEli said:

No I have tried that! I need a css code 

thanks but it didnt work, I don't know if there is a way to target the code block specifically? I have tried for example .sqs-block-code-block .sqs-block-code & playing around with height or reducing margins but nothing 

Since I can't see what's happening on the back end, can you do a screen recording of editing the block and what you see when you try that to help give me a better understanding? Thanks

14 minutes ago, Ziggy said:

Since I can't see what's happening on the back end, can you do a screen recording of editing the block and what you see when you try that to help give me a better understanding? Thanks

yes thanks! here is a loom  I don't have a height set so not sure why I cant make the code block smaller 

Example page: https://pigeon-harp-fl3n.squarespace.com/draft-beer-systems the password is 123, the code is attached below:

 

<div id="dots1"></div><div id="more1" class="showmore">

  <p align=“left”>

    In addition to designing, building, and installing custom commercial draft beer systems, we offer training, maintenance, and servicing to ensure that you get the most from your system. Our flexible, creative approach accommodates both space constraints and varied budgets, and we always offer the quality equipment you expect and the personal attention you deserve.

  </p>

  <p align=“left”>

    You need superior beverage dispensing equipment and exceptional service, so you can provide libations that deliver the outstanding flavors and aromas the breweries intended. If you want to deliver the perfect tipple every time, GS Draft has the end-to-end draft beer system solutions you’re looking for. </p>

  <h2 style="text-align:left;white-space:pre-wrap;color:#bc6124;" id="yui_3_17_2_1_1617437035917_6105";>

    The Benefits of Draft Beer Tap Systems

  </h2>

  <p align=“left”>

    There’s a common myth that beer in the bottle is better than brews served on tap. The trouble is that subpar systems and improperly maintained draft lines can foul even delectable beverages. With custom draft beer systems professionally designed and installed, staff training on proper usage, and regular servicing and maintenance, your draft beer will offer a crisp bite, full body, and rich, aromatic bouquet that simply cannot be beat by a bottled brew.

  </p>

<p align=“left”>

    That’s just the start of the benefits you’ll enjoy with a custom GS Draft system, though. For one thing, kegs are the most environmentally responsible way to offer beer – they’re returnable, refillable, recyclable, and they can last up to 30 years and serve up a whopping 27,000 glasses in their usable life, equating to 1,125 cases of bottles or cans (which often end up in the landfill).

  </p>

<p align=“left”>

    Perhaps more importantly for responsible business owners, draft systems are economically advantageous. With greater operational efficiency and product yield, draft beer offers much higher profit margins than serving from bottles or cans.

  </p>

<p align=“left”>

    Plus, draft systems aren’t just for beer anymore. GS Draft designs and installs custom systems for cold brew and nitro brew coffees, providing new options for customers at restaurants, coffee shops, convenience stores, and more. Whether you’re serving beer, wine, cocktails, or coffee, our systems ensure that each beverage is served at the peak of freshness and precision temperatures, so your customers always enjoy a consistently satisfying experience.

  </p>

</div>

<button onclick="myFunction1()" id="myBtn1" class="btnreadmore">Read More →</button>

 

<style type="text/css">

.showmore {display: none;}

#dots1, #dots2, #dots3, #dots4, #dots5, #dots6, #dots7{display:none!important;}

.btnreadmore{

    color:#bc6124;

    font-size:12px;

    padding: 0;

    border: none;

    background: none;

    align=“left”

    display:block;

}

</style>

<script type="text/javascript">

function myFunction1() {

  var dots = document.getElementById("dots1");

  var moreText = document.getElementById("more1");

  var btnText = document.getElementById("myBtn1");

 

  if (dots.style.display === "none") {

    dots.style.display = "inline";

    btnText.innerHTML = "Read More →";

    moreText.style.display = "none";

  } else {

    dots.style.display = "none";

    btnText.innerHTML = "Read Less ←";

    moreText.style.display = "inline";

  }

}

</script>

Okay, so it is the warning message issue that causes the code block to be too big (I've complained about this to Squarespace before). The CSS that I provided should have removed that warning. Did you add the CSS and then go and try editing the page (and shortening the block)?

1 hour ago, Ziggy said:

Since you're running a script, I've found in some situations that this can help you reduce the block size:

Add to Custom CSS:

html.squarespace-damask .sqs-blockStatus {
    display: none !important;
}

 

44 minutes ago, Ziggy said:

Okay, so it is the warning message issue that causes the code block to be too big (I've complained about this to Squarespace before). The CSS that I provided should have removed that warning. Did you add the CSS and then go and try editing the page (and shortening the block)?

oh I misread the code!! I didn't try to edit after adding it yes thanks so much it worked!