Umlaut Posted June 30, 2020 Share Posted June 30, 2020 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
rwp Posted June 30, 2020 Share Posted June 30, 2020 @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
Umlaut Posted June 30, 2020 Author Share Posted June 30, 2020 Thanks, but this code is freezing the columns on mobile and not aligning the buttons. I'm not sure if I'm missing something. Link to comment
rwp Posted June 30, 2020 Share Posted June 30, 2020 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. Link to comment
rwp Posted July 1, 2020 Share Posted July 1, 2020 @Umlaut were you able to get this working? Link to comment
Umlaut Posted July 1, 2020 Author Share Posted July 1, 2020 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
rwp Posted July 1, 2020 Share Posted July 1, 2020 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. Link to comment
Umlaut Posted July 1, 2020 Author Share Posted July 1, 2020 That worked. You're so helpful, thanks! Link to comment
Umlaut Posted July 15, 2020 Author Share Posted July 15, 2020 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
rwp Posted July 15, 2020 Share Posted July 15, 2020 [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 } Link to comment
rwp Posted July 15, 2020 Share Posted July 15, 2020 Also, if you change the 33% to 29% it seems to center up a bit better because of the padding. Link to comment
Umlaut Posted July 16, 2020 Author Share Posted July 16, 2020 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. Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 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 Link to comment
Umlaut Posted July 16, 2020 Author Share Posted July 16, 2020 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 } Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 Its working now, probably just cached on your end, try viewing in private browser window. Link to comment
Umlaut Posted July 16, 2020 Author Share Posted July 16, 2020 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
rwp Posted July 16, 2020 Share Posted July 16, 2020 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; Link to comment
Umlaut Posted July 16, 2020 Author Share Posted July 16, 2020 Amazing, thank you. It's perfect now! Really appreciate your ongoing assistance here. 🙂 Link to comment
Bano Posted July 26, 2020 Share Posted July 26, 2020 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
tuanphan Posted July 27, 2020 Share Posted July 27, 2020 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
Umlaut Posted July 29, 2020 Author Share Posted July 29, 2020 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
rwp Posted July 29, 2020 Share Posted July 29, 2020 What's the link to the other page? Link to comment
Umlaut Posted July 29, 2020 Author Share Posted July 29, 2020 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 comment
rwp Posted July 29, 2020 Share Posted July 29, 2020 It's not always going to be the same on every page. There's some element finder add-ons for chrome and Firefox. Link to comment
Umlaut Posted July 29, 2020 Author Share Posted July 29, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.