Jump to content

Fixed Button Placement in 3 Column Layout

Recommended Posts

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 comment
  • Replies 30
  • Views 3k
  • Created
  • Last Reply
@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;
  }
}

 

Link to comment

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 comment
  • 2 weeks later...

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!

 

Link to comment

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

 

Link to comment

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 comment

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

Link to comment
  • 2 weeks later...

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

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 comment

Archived

This topic is now archived and is closed to further replies.

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