Multiple Buttons in the Same Container

Is there a way to have multiple buttons in the same container with different links respectively? I can put multiple buttons blocks side by side, but they all have uneven spacing. They also line up terribly on mobile using the drag into place method. Still developing my site so it's not live yet. 

Thanks!

If your site is trial/private, you can setup password & share url. We can check easier

8 hours ago, tuanphan said:

If your site is trial/private, you can setup password & share url. We can check easier

hey it is set to private. the password is noahlang

What is site url?

12 hours ago, tuanphan said:

What is site url?

https://noahlang.squarespace.com/ 

Can you provide me with you email so I can add you as a contributor?

Thank you

10 hours ago, noahawaii said:

https://noahlang.squarespace.com/ 

Can you provide me with you email so I can add you as a contributor?

Thank you

You mean 4 buttons on homepage?

I think we can help you convert them to Code Block buttons, so your problem will be fixed

18 minutes ago, tuanphan said:

You mean 4 buttons on homepage?

I think we can help you convert them to Code Block buttons, so your problem will be fixed

I have four different buttons in separate blocks side by side but I wanted to know if there was a way to do it in one block so the spacing, size, etc. looked cleaner

On 3/16/2022 at 1:46 PM, noahawaii said:

I have four different buttons in separate blocks side by side but I wanted to know if there was a way to do it in one block so the spacing, size, etc. looked cleaner

Try adding a Code Block > Paste this code.Replace url/text with your url/text

<div class="four-buttons">
  <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
</div>
<style>
  div.four-buttons {
    display: flex;
    justify-content: center;
  }
</style>

On 3/18/2022 at 1:49 AM, tuanphan said:

Try adding a Code Block > Paste this code.Replace url/text with your url/text

<div class="four-buttons">
  <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center">
  <a href="/prints" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" target="_blank">
    Prints
  </a>
</div>
</div></div>
</div>
<style>
  div.four-buttons {
    display: flex;
    justify-content: center;
  }
</style>

 

Thanks! A little bit of css work and it looks good.