bronzeville

1 hour ago, Caroline_Smith said:

No problem! You could set a static height for all of the cards, but that would most likely cut off some words or mess up the layout. What I typically try to do in situations like this is make sure each card has a pretty equal amount of title and description text if possible.

Yes I noticed that static heights only work with certain screen size and window size so I'll try to make the descriptions similar in length. Thanks so much!

5 hours ago, Caroline_Smith said:

It seems like there are some empty paragraphs in the first item that are causing the height of the first item to be larger than the others. I would try erasing the unneeded ones. But I did notice the above code I gave you has a horizontal alignment issue. Try this one instead:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

 

I intentionally added those paragraphs for tests. Let's say each list item had different length content like in those, is there a way to make them all equal the height of the longest card??

Thanks again for your help I really appreciate it

Edit: I published the page I was trying to mirror with this example. here is the link. For the senior team members I would like for all of their cards to be the same height, but the different length bios make them uneven.

https://www.bronzeville-foundation.com/team

4 hours ago, Caroline_Smith said:

Hi there! What you need is a CSS flexbox rule. Here is the code snippet corresponding to the page section on your website. You'll need to add this in the header code injection of that page:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

Hope this helps!

Hello,

thanks a lot this definitely helps. But there's one more hiccup, Before I was able to lock them all to be the same height, but now it seems that they're different heights from one another. How can I make sure they stay at the same height as each other?

Thanks again

Site URL: https://www.bronzeville-foundation.com/forum-example

password to enter site page: bronzeville

Hello,

If you see the example on the site I linked, I have 4 elements in a simple list which is 3 per row. The 4th list item is aligned to the left. Is there any way I can center this 4th item. Or for example, if I had 5 items, could I center those two?

Thanks.

On 10/6/2021 at 4:32 AM, tuanphan said:

You want the code runs on all section on Team 2 page or which section? We can tweak & give new code

Hello, following up with another question here – I'm wondering how I can use CSS to center certain items in my simple list.

I have 4 team members, but only 3 per row, how can I center the 4th member

site url: https://www.bronzeville-foundation.com/team

On 10/5/2020 at 2:49 PM, fatcatdesign said:

Hi @mtaddict

I believe I have a solution. Try this:

You'll need to add custom css code, but it's fairly simple to do.

I'm normally a Wordpress designer where I've used variations of this solution. I tested this solution on a demo SS site and it seems to be working thus far.

------------------

First, for those who haven't already, they'll need to add the anchor tags/links using IDs to the sections.
To do this, you need to add anchor tags/links using IDs to the sections on the page as follows:
https://fatcat.agency/squarespace-adding-anchor-links-using-IDs

• Go to the section you want to hyperlink to;
• Hover over the top of the section
• Look for the horizontal teardrop, and click on it.
• Search for html
• Click on code
• Wipe out the sample code
• Enter your code as follows:

<a id="name-of-your-section"></a>

• where name-of-your-section is replaced by your section name.
• No spaces, no underscores, all lowercase.
• Save.
• Next, you'll want to add the section as a link to your navigation (or wherever you wish).
• Add the option of "link" and use the following as the hyperlink:

#name-of-your-section

• where you name-of-your-section is replaced by your section name, preceded by the pound sign.

Request to the SquareSpace improvement team: Is there to add custom IDs to each section? This is a basic feature even of Weebly, and it would make the process even easier to implement, and since SS is targeting web designers as well as DIY-ers, it makes sense to have this as a feature. If it's in place, please advise.

-------------------------------  

Next, how to offset the anchor links to accommodate the height of your header:

If you look at the link provided, there is CSS code as follows:

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Depending upon the height of your header (including any above-header you may have), you'll want to adjust the px height and negative margin height.

So, you'll want to add the code to custom CSS, with those numbers adjusted. I've created a screencast showing you how:

https://fatcat.agency/squarespace-offset-hyperlinks-for-header-height

• Go to Design mode
• Click on Custom CSS
• Copy the code noted above to a text editor, then paste it into the Custom CSS field.
• Save.
• Test the result.
• If you need to adjust the height, you will want to change the px height in both lines of code. For example, in my demo I changed 90px to 120px, for both height and margin, like so:

height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */

• This number will vary, depending upon the height of your header. 
• Be sure to ONLY change the number; leave the px and the rest of the code in place. Do not remove the minus symbol from the margin setting.

 

 

Hello, this works in terms of offsetting, but now my anchor links wont scroll smoothly