Flex Box aligned buttons only appear in editor

Site URL: https://www.kcostudios.squarespace.com

I'm looking to align two buttons in two columns, following different length text boxes. I didn't want to place a spacer because on mobile the buttons won't stick with their respective content.

I used a code on this site to achieve what I was looking for...great! BUT it only appears when I'm in the editor. If I use private mode on chrome or switch to safari my buttons disappear completely. I've removed the code from the site so the buttons are showing up, just unevenly. Any advice, please!?

The page in question is 

kcostudios.squarespace.com/team

password: demo

Black buttons under each long text box...

This is the code I had used previously:

/* TEAM align buttons */
@media only screen and (min-width: 767px) {
section[data-section-id="627d366c0e4da1155e256f49"] .sqs-row {
      display: flex !important;
      max-width: 100% !important;
  }

section[data-section-id="627d366c0e4da1155e256f49"] .sqs-col-4 {
      flex: 1 !important;
  }

section[data-section-id="627d366c0e4da1155e256f49"] .sqs-block.button-block.sqs-block-button {
      position: absolute !important;
      width: 39%;
      bottom: -9%;
  }
}

Thank you @tuanphan ! That's great...works in the editor and live in incognito/safari etc.

Cheers

I have a follow-up question on how to repeat the above button alignment in other areas. I've tried applying this technique to a separate area (changing the page section id of course). I'm not really familiar with targeting with .span but from what I can see the same span numbers used in the previous solution apply to the second section I'd like to apply this to. It does alter it, but it's not working consistently as the other area does. Basically, when the browser gets very wide, they no longer align. What needs to be altered/targeted to ensure this works on additional areas?

The page in question is the homepage of Two square images with text and black buttons below.

kcostudios.com

password: demo

Thank you!

7 hours ago, beckon said:

I have a follow-up question on how to repeat the above button alignment in other areas. I've tried applying this technique to a separate area (changing the page section id of course). I'm not really familiar with targeting with .span but from what I can see the same span numbers used in the previous solution apply to the second section I'd like to apply this to. It does alter it, but it's not working consistently as the other area does. Basically, when the browser gets very wide, they no longer align. What needs to be altered/targeted to ensure this works on additional areas?

 

The page in question is the homepage of Two square images with text and black buttons below.

kcostudios.com

password: demo

 

 

Thank you!

It looks like you added an id in wrong place. Can you send the code you used?

@media screen and (min-width:768px) {
div#page-section-627d1b28df273e4ff75383d3
 {
.span-12>.row {
    display: flex;
}
.button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.span-5 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}
}}

Here is the code I used, having altered the number 627d........83d3 from the original section id to reflect the the new area I'm looking to change.

Thanks for your time

This section has a different structure

Change this code

.span-5 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}

to this

.span-12>.row>.col {
	position: relative;
    flex: 1;
    padding-bottom: 100px;
}

Hmmm...I replaced the code as per above, but I'm afraid that made it worse!?

In the builder view it shrunk the image above the button and text and the button overlaps the text and doesn't align. 

In incognito mode it's better in that the buttons are vaguely aligned, but the image has reduced in size. 

Ahh, I think I resolved it! I went back to the first code you provided, but readjusted my spacer blocks so they were in between the two images instead of dividing the content further up in the headline area. It's working now...phew!