Jump to content

Multiple Buttons in the Same Container

Recommended Posts

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Edited by noahawaii
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.