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

Fixed Button Placement in 3 Column Layout


Umlaut

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

Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Amazing, thank you. It's perfect now! Really appreciate your ongoing assistance here. 🙂

Posted Images

Recommended Posts

  • 0
@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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

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
Link to post
  • 0

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

@Umlaut were you able to get this working?

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

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. 

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.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0
Posted (edited)

Hi! I seem to be having a bit of the issue with this code and was wondering what I can do to fix it. Looks great on edit mode, but it's building in a ton of space and aligning right on the bottom of the section once it's live. Do you know how to fix this? Thanks!

 

Edited by Umlaut
Link to post
  • 0
[data-section-id="5eecc69ff18ce3329b94db4d"] .content-wrapper {
    padding-bottom: 3vw !important;
}

#block-yui_3_17_2_1_1593630799531_12307 {
    display: none;
}

Add this code in between the last two }

image.png.1b13861af1189bbd604384ff346e78ab.png

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

Also, if you change the 33% to 29% it seems to center up a bit better because of the padding.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

Appreciate the suggestion, but I'm not seeing a difference here. I don't know why there's so much space on top of the buttons. 

 

image.thumb.png.97ab662cee66bc87c681e4c7186a5887.png

Link to post
  • 0

At some point this code was added to your CSS

[data-section-id="5eecc69ff18ce3329b94db4d"] .content-wrapper {
    padding-bottom: 10vw !important;
}

Replace the 10vw with 0

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0
Posted (edited)

This is the code you recommended - I was seeing if 10 would work because 3 doesn't. Changing to 0 doesn't do anything either. 

16 hours ago, rwp said:

[data-section-id="5eecc69ff18ce3329b94db4d"] .content-wrapper {
    padding-bottom: 3vw !important;
}

#block-yui_3_17_2_1_1593630799531_12307 {
    display: none;
}

Add this code in between the last two }

image.png.1b13861af1189bbd604384ff346e78ab.png

 

Edited by Umlaut
Link to post
  • 0

Its working now, probably just cached on your end, try viewing in private browser window.

image.thumb.png.b6a832219f6a0b49be86646cb826bab1.png

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

Hmmm, how funny! I looked at in incognito. It looks better now on top - I tried adding a spacer underneath to add more space beneath the buttons but it only added space above. Also tried to increase the section height, and it didn't do anything. Ideas?

Link to post
  • 0

Change the bottom value to increase bottom space. You will also need to change the padding-bottom that we just set to 0 as well.

Try changing them both to 3vw so they look like this:

padding-bottom: 3vw !important;
bottom: 3vw;

image.png.20e083ecefb526e41652f494fa3645ef.png

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

I'm a complete newbie so apologies if this sounds foolish. I have the exact same problem @Umlaut was having, but have *no* idea what to do with the code @rwp has given. Could you be a little more specific about where I put this code (and which of the various options you've given I should use)? 

Thanks so much. My website is www.banomurtuja.com and the buttons I need aligning are half way down. 

 

Link to post
  • 0
20 hours ago, Bano said:

I'm a complete newbie so apologies if this sounds foolish. I have the exact same problem @Umlaut was having, but have *no* idea what to do with the code @rwp has given. Could you be a little more specific about where I put this code (and which of the various options you've given I should use)? 

Thanks so much. My website is www.banomurtuja.com and the buttons I need aligning are half way down. 

 

Add to Home > Design > Custom CSS

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

I'm having trouble replicating on other sites I'm building because I can't quite figure out where you're getting the page-section-# and the .sq-col-#. I've added the code on another site, but the buttons don't line up. What's the easiest way to identify these particular sections when you inspect?

Link to post
  • 0

What's the link to the other page?

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

It's not live yet - I'm going to be using this same code on many sites in the future, so I'd love to know how to find the numbers myself if at all possible. 

Link to post
  • 0

It's not always going to be the same on every page.  There's some element finder add-ons for chrome and Firefox.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Link to post
  • 0

Yes, that's why I'm trying to figure out how to find them myself - because they are different on each page. I use the block identifier plugin for chrome and just inspecting the site. But I can't seem to find where you're pulling them from. I don't think you'd like for me to have to hit you up to tell me on every site and page I need to line up buttons on! Lol. 

Link to post
  • 0

Sorry, I didn't mean that the page section would be different.

Each site may have a *completely* different layout, and the code might not work at all.

On your page, its the page-section above the block with the buttons (the button link is the red arrow).

image.png.f0da0d1ac499bb13bcb3c9ba04b33765.png

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

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...