Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Umlaut

Fixed Button Placement in 3 Column Layout

Question

Site URL: https://www.alceasurrogacy.com

On the home page, I'm trying to lock the blue buttons on the bottom in the 3rd section to make them all even no matter the width of the screen. The 3 column layout gives me trouble since the text is different lengths. I tried adding a new section with the buttons but they won't line up on mobile.

I'd love any help you can provide. (Don't know if this is a CSS fix or if Squarespace has a solution, but I can't find anything about this online!)

Password is umlautagency - going live on 6/30

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0
Posted (edited)
@media only screen and (min-width: 767px) {
  #page-section-5eecc69ff18ce3329b94db4d .sqs-row {
      display: flex;
      max-width: 100% !important;
  }

  #page-section-5eecc69ff18ce3329b94db4d .sqs-col-4 {
      flex: 1;
  }

  #page-section-5eecc69ff18ce3329b94db4d .sqs-block.button-block.sqs-block-button {
      position: absolute;
      width: 33%;
      bottom: 0;
  }
}

 

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

Thanks, but this code is freezing the columns on mobile and not aligning the buttons. I'm not sure if I'm missing something.

Edited by Umlaut

Share this post


Link to post
  • 0
Posted (edited)

I can check when I get home to make sure, because I don't remember the exact details, but try the code above, I just edited it.

Edit: Just checked it, the code above should be correct now, sorry about that.

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@Umlaut were you able to get this working?


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

You are amazing, that worked!! Thank you.

I have one other question - let me know if I should create a new question on the forum. 

I can't seem to get the telephone number to autofill on their forms. Is there a preferred plugin you use for forms on Squarespace or some code that will help that autofill? Everything else is filling except that one field. 

Share this post


Link to post
  • 0

Phone won't auto fill because its 3 input blocks. You could try replacing it with a Number input box, and naming it phone, and see if that works.

I have never tried though.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...