Side by side buttons for mobile and desktop

Hi, I'm having a similar problem on my 7.0 site. I have 4 buttons (the first is a form block button) that I would like to have spaced evenly under the text block. And also line up with the edges of the text block / the row of buttons would have the same width as the text block. Any ideas? here is the url: https://www.greendiebboll.com/about Much appreciated!

14 hours ago, ed.design said:

Hi, I'm having a similar problem on my 7.0 site. I have 4 buttons (the first is a form block button) that I would like to have spaced evenly under the text block. And also line up with the edges of the text block / the row of buttons would have the same width as the text block. Any ideas? here is the url: https://www.greendiebboll.com/about Much appreciated!

 

 

Difficult to solve this case (still can solve but require a lot of code). You can consider changing it to 2 rows

Row 1: 3 buttons

Row 2: 1 button but make it align center

What do you think?

I appreciate the creative idea, but I'd love to have all 4 buttons on one line. Would it be possible to have 4 buttons in one row if I made the 4th button smaller, with shorter text? Why is 3 buttons easier to do than 4?

Thank you for your help!

18 hours ago, ed.design said:

I appreciate the creative idea, but I'd love to have all 4 buttons on one line. Would it be possible to have 4 buttons in one row if I made the 4th button smaller, with shorter text? Why is 3 buttons easier to do than 4?

Thank you for your help!

The tricky thing here is the equal space between the buttons.

Or we can use Code Block to add 4 buttons, if you want to try this, we can give the code

Sure, I can add a code block! Yes, please share the code. 

15 hours ago, ed.design said:

Sure, I can add a code block! Yes, please share the code. 

Because first button is Form Block button so we can't use code to handle it.

You can add a Code Block next to Form Block button > Paste this code

<!-- Resume Button -->
<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary">
  <a href="/s/Isaac-Green-Diebboll-Resume-9l8d.pdf" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" target="_blank" data-initialized="true">
    RESUME
  </a>
</div>
</div></div>
<!-- Instagram Button -->
<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary">
  <a href="https://www.instagram.com/greendiebboll/" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" target="_blank" data-initialized="true">
    RESUME
  </a>
</div>
</div></div>
<!-- Instagram Button -->
<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content">
<div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary">
  <a href="https://www.engncntr.com" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" target="_blank" data-initialized="true">
    ENGN CIVIC CREATIVE CENTER
  </a>
</div>
</div></div>
<style>
@media screen and (min-width:992px) {
div.code-block>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.code-block .button-block {
    padding-top: 0 !important;
}
}
</style>

Thank you for your help Tuan Phan!! 

This code block worked great, my buttons are now equally spaced in a row (see attached).

I got rid of the form button, replacing it with a regular button. I also edited the CSS to remove padding around the buttons so that the row of buttons line up with the text block on my page.

I am trying to add an alternate style for mobile, where the buttons are stacked and should be the same width as the text block. I made the button width 88% based on the view on my phone, but thinking this is probably not reliable ... do you have a better solution? (mobile view also attached)

<style>
  /* MOBILE */
@media screen and (max-width:767px) {

div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 7px 0 !important;
}  
div.code-block .sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
  width: 88% !important;
} 
}
  /* DESKTOP */
@media screen and (min-width:768px) {
div.code-block>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.code-block .button-block {
    padding-top: 0 !important;
}
div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 0 !important;}
}
</style>

15 hours ago, ed.design said:

Thank you for your help Tuan Phan!! 

This code block worked great, my buttons are now equally spaced in a row (see attached).

I got rid of the form button, replacing it with a regular button. I also edited the CSS to remove padding around the buttons so that the row of buttons line up with the text block on my page.

I am trying to add an alternate style for mobile, where the buttons are stacked and should be the same width as the text block. I made the button width 88% based on the view on my phone, but thinking this is probably not reliable ... do you have a better solution? (mobile view also attached)

<style>
  /* MOBILE */
@media screen and (max-width:767px) {

div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 7px 0 !important;
}  
div.code-block .sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
  width: 88% !important;
} 
}
  /* DESKTOP */
@media screen and (min-width:768px) {
div.code-block>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.code-block .button-block {
    padding-top: 0 !important;
}
div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 0 !important;}
}
</style>

 

I checked on mobile & all buttons are fine

ok, thank you for all your help!

Hi Tuan Phan,

First off, can I just say your posts on countless forum threads have been so helpful with editing CSS, and you're a total legend! Hope you're well.

I'm having a slightly different issue related to this topic, in which I'm trying to format my mobile site so that the button in the top right corner doesn't go down a line when on mobile. However, it's aligned next to a text block, not another button. Any ideas on how to get the button to stay right-aligned without breaking to the next line?

17 hours ago, madiface said:

Hi Tuan Phan,

First off, can I just say your posts on countless forum threads have been so helpful with editing CSS, and you're a total legend! Hope you're well.

I'm having a slightly different issue related to this topic, in which I'm trying to format my mobile site so that the button in the top right corner doesn't go down a line when on mobile. However, it's aligned next to a text block, not another button. Any ideas on how to get the button to stay right-aligned without breaking to the next line?

Can you share link to this page?

Sorry! That would be useful...

https://hangerhill.squarespace.com/releases

and

https://hangerhill.squarespace.com/broadcast

On 11/26/2023 at 10:38 PM, madiface said:

Sorry! That would be useful...

https://hangerhill.squarespace.com/releases

and

https://hangerhill.squarespace.com/broadcast

 

Add to Website Tools (under Not Linked) > Custom CSS

/* Buttons on mobile */
@media screen and (max-width:640px) {
/* releases */
div#page-58400879e4fcb526208ee129 .span-12>.row>.span-6 {
    width: 40% !important;
    float: left !important;
}
div#page-58400879e4fcb526208ee129 * {
    white-space: nowrap !important;
}
/* Broadcast */
div#page-5accd6d3562fa79982dac32f .span-12>.row>.span-6 {
    width: 48% !important;
    float: left !important;
}
div#page-5accd6d3562fa79982dac32f * {
    white-space: nowrap !important;
}}

You're the best, tuanphan! Thank you. And Happy New Year.

Hey Tuanphan,

I seem to be having the same problem with the buttons being side by side. Would you be able to assist with this headache please? I am looking to have the buttons side by side and centered on the page with a small amount of space between the buttons. Thank you in advance for your help!

https://bonedaddytattoo.com/jaycunliffe

On 2/28/2024 at 2:03 AM, bonedaddystattoo said:

Hey Tuanphan,

I seem to be having the same problem with the buttons being side by side. Would you be able to assist with this headache please? I am looking to have the buttons side by side and centered on the page with a small amount of space between the buttons. Thank you in advance for your help!

https://bonedaddytattoo.com/jaycunliffe

I think your Code Block has some invalid symbols, can you send all code in Code Block? I can check easier