Make 3 containers the same size?

Hello! I am on 7.0 and I see that I can make 2 and 4 blocks even sized and spaced side by side. BUT I cannot do that with 3 blocks. In the site I have created a test page. You can see that there is one image that is always bigger than the other. I have used spacers to get the same size, but when I do that all 3 will be closer to the left or right of the screen depending on what side the spacer is. 

I am really looking for a way to get these to be in the middle of the page at about 80% width or so, evenly spaced between each other, and the images/columns the same width(size).

Is there a way to do this for the the desktop view only (as mobile would be inline anyway)

also, this would need to be page by page and not a global edit. Thank you!

https://www.kaliberautodetailing.com/interior-packages-test-copy-copy

9 hours ago, Rmarkjr said:

BUT I cannot do that with 3 blocks.

This version of Squarespace has a 12 columns which allows you to have 1, 2, 3, 4, 6 or 12 even columns, but when you put a spacer block in the 1st and 12th column that only leaves 10 columns which doesn't divide into 3 or 4 even columns. 

You can use CSS like this to adjust the width on desktop on that one page so you can remove the spacer blocks that are causing problems:

@media only screen and (min-width:640px) {
  #collection-669eef1c2e42940dea703216 {
    .Main-content {
      margin: 0 10vw;
    }
  }
}

Thanks for that. Where do I put that code in at so that it is for a page by page basis? It didnt work as markdown, didn't work in the advanced header thing. Does this still go in the regular CSS page?

Ok I tried it in the CSS section and that seems to be where it needs to be. However, with no spacer blocks the images still cannot be the same size. I move them and one will be bigger than the other. 

11 hours ago, Rmarkjr said:

Does this still go in the regular CSS page?

Yes, the #collection-id defines the specific page.

Looking like you still have a spacer on either side:

20 hours ago, Ziggy said:

Yes, the #collection-id defines the specific page.

Looking like you still have a spacer on either side:

 

 

Thank you! I missed those little ones on the top of the page.

Is there a way to add a bit more space between each block if I wanted to space them out just a tad further? Also, this code is affecting the entire page, any way to only affect the packages blocks/section?

Also, I have several pages of the same thing (city pages) that I will do this for, and I already have about 5 pages for ceramic coatings that I will be redoing as 3 blocks. Is there a way to add the code page by page in say markdown that does everything above, instead of the CSS editor? Seems like it would be easier for me to manage it on each page vs adding lot of id's in the editor that I have no idea what they are. Unless I wanted to copy and paste the full code for each page which I really don't want to do that either, just sounds messy more to sort through in the editor.

4 hours ago, Rmarkjr said:

Is there a way to add the code page by page in say markdown that does everything above, instead of the CSS editor?

If you have a business plan or higher you should use this code in the Page Settings -> Header Code Injection:

<style>
  @media only screen and (min-width:640px) {
    .Main-content {
      margin: 0 10vw;
    }
  }
</style>

On 9/4/2024 at 3:34 AM, Ziggy said:

If you have a business plan or higher you should use this code in the Page Settings -> Header Code Injection:

<style>
  @media only screen and (min-width:640px) {
    .Main-content {
      margin: 0 10vw;
    }
  }
</style>

 

ah ok, thank you. That seems to work well. 

One last thing. On the pages where I have text above the block such as my exterior packages page (Exterior Auto Detailing Packages | Professional Car Detailing Service | Owasso OK (kaliberautodetailing.com). When I make the window on the computer smaller such as tablet size, the images/boxes get way out of line. Is there anything that can be done about that at all with CSS? 

6 hours ago, Rmarkjr said:

When I make the window on the computer smaller such as tablet size, the images/boxes get way out of line. Is there anything that can be done about that at all with CSS? 

Not easily, you have 3 columns and they have separate heights determined by the text breaking to more lines. You could start adding minimum heights to all of the blocks using CSS but it tends to create unwanted blank space and you also can't cover every screen size or every user-determined scaling factor, so generally it's not going to be worth it.