beckon

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!

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. 

@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

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!

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

Cheers

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%;
  }
}

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

Hi– I've used a portfolio page in order to setup a typographic menu with image swap rollover on the homepage. These menu items all link out to individual pages or anchor links. I wasn't able to use the normal portfolio pages to design this content as they were restrictive on the content and some menu items share a link etc. I was able to circumvent this with code from this forum placed in the code injection:

something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

   $(document).ready(function() {

     $('.portfolio-hover-item[href="/home/interior-architecture"]').attr("href",  “/creative-services/#interior-build”);

     $('.portfolio-hover-item[href="/home/custom"]').attr("href", “/custom”);

     $('.portfolio-hover-item[href="/home/creative-direction”]’).attr("href", “/creative-services");

     $('.portfolio-hover-item[href="/home/sourcing]’).attr("href", “/sourcing”);

     $('.portfolio-hover-item[href="/home/collateral”]’).attr("href", “/creative-services/#collateral“);

     $('.portfolio-hover-item[href="/home/art-curation”]’).attr("href", “/creative-services/#custom“);

   });

</script>

The above code works to redirect the urls to the right pages and avoiding the built in portfolio pages. However I'm now concerned the blank portfolio pages that are unused will be visible on search engines based on their url name e.g. if it's interior architecture will that come up in the listing.

As this forum has made clear it's not possible to disable individual pages within a portfolio. Is there any way to hide those 'blank pages' from search?

url:  kcostudios.squarespace.com

password: demo

Thanks!

Sorry, it's on this page now–the top section! 

https://kcostudios.squarespace.com/services

password: demo

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

Hello,

I'm trying to create a 4x 2 grid of images, where image blocks with captions below take up 1, 2 or 4 squares of the grid. When I have 3 images aligned, I seem to be able to get them to all the same height (using shift to move in pixel increments). But when I have two images stacked on top of each other, I can't get the large image next to it to align. I've been doing it visually but on the live site it will either shift, or it will look pretty close but not scale responsively.

screenshots attached of misalignment.

Site is 7.1

Site is https://kcostudios.squarespace.com/

password: demo

Thank you!