List Section, Description start at the same position

Is there a way to make the description of each content start at the same position, whether the title is 1, 2, 3 lines long? 

You can control the spacing so it's even, but I want the description to start at the same position across each card.

Hi @Elletra To dynamically align the list item descriptions at the same starting position, regardless of the number of lines in the list item titles, you can add this code under Website > Pages > Website Tools > Code Injection > Header.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const titles = document.querySelectorAll('.list-item-content__title');
  let maxHeight = 0;

  titles.forEach(title => {
    maxHeight = Math.max(maxHeight, title.offsetHeight);
  });

  titles.forEach(title => {
    title.style.height = `${maxHeight}px`;
  });
});
</script>

<style>
.user-items-list-item-container[data-title-alignment="left"] .list-item-content__title {
  margin-left: 0;
  margin-right: 0;
}   
  
.list-item-content__text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px; 
}
</style>

@Lesum It kinda works, but it makes my titles push to the side. Also can I control the px distance between title and description? These change are on a demo site, so i can't send link, but here is a screenshot.

Do you have link to page?

@tuanphan This page is not yet published. I'm working on a duplicate hidden website.

On 12/3/2024 at 2:22 AM, Elletra said:

@tuanphan This page is not yet published. I'm working on a duplicate hidden website.

You can follow this then share url, so we can check and help you easier

@tuanphan Here is the website:
https://trumpet-beagle-999.squarespace.com/

pw: SqspDesign99

On 12/6/2024 at 10:42 PM, Elletra said:

@tuanphan Here is the website:
https://trumpet-beagle-999.squarespace.com/

pw: SqspDesign99

Use this to Custom CSS box to fix problem

h2.list-item-content__title {
    margin: 0 auto;
}