How to adjust aspects of an auto-layout list?

(sitelink: apparent.squarespace.com, password: 1234a).

Hi everyone,

I am working on my first website and I wanted to make a list with different people in it that describe their experiences on a certain topic. The list what I'm talking about is the part with the purple background and has as a title "De powerouders".

I'm using an auto-layout list for this, since it makes the editing of the website easier and makes it easier to keep the layout when switching between desktop and mobile. 

However, I am facing some problems now and I hoped you could help me to solve these problems.

1.  I want to change the size of the title "De powerouders" to heading 2 (2.8 rem) and set the font to Poppins with weight 500.
2. I also want to change the size of the content description (underneath the name Alicia, for example) to paragraph 2 (1 rem). And I want this for every person in the list.
3. I also want to make the pictures in this list clickable and link to another page. Now, the page it has to link to can be reached by clicking the button underneath, but ideally I want to remove the button. So the page can only be reached by clicking on the image.

Can somebody perhaps help me on how to do this? I would really appreciate it!

1 hour ago, Ruadth said:

(sitelink: apparent.squarespace.com, password: 1234a).

Hi everyone,

I am working on my first website and I wanted to make a list with different people in it that describe their experiences on a certain topic. The list what I'm talking about is the part with the purple background and has as a title "De powerouders".

I'm using an auto-layout list for this, since it makes the editing of the website easier and makes it easier to keep the layout when switching between desktop and mobile. 

However, I am facing some problems now and I hoped you could help me to solve these problems.

1.  I want to change the size of the title "De powerouders" to heading 2 (2.8 rem) and set the font to Poppins with weight 500.
2. I also want to change the size of the content description (underneath the name Alicia, for example) to paragraph 2 (1 rem). And I want this for every person in the list.
3. I also want to make the pictures in this list clickable and link to another page. Now, the page it has to link to can be reached by clicking the button underneath, but ideally I want to remove the button. So the page can only be reached by clicking on the image.

Can somebody perhaps help me on how to do this? I would really appreciate it!

1. Apply my below style Css

2. Try the tutorial in my below video

 3. The idea is setting your button that wrap the all the list item

My suggestion Css Code

/* List title font-size */
.user-items-list .list-section-title {
  font-size: 2.8rem;
  font-weight: 500;
}

/* Make user list clickable --start*/
.list-item-content__button-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.list-item-content__button-wrapper a {
  width: 100%;
  height: 100%;
  background: transparent !important;
  color: transparent !important;
}

.list-item {
  position: relative;
}

.list-item-content__button-container {
  height: 100%;
  margin-top: 0 !important;
}

/* Make user list item clickable --end*/

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

1 hour ago, bangank36 said:

1. Apply my below style Css

2. Try the tutorial in my below video

 

 3. The idea is setting your button that wrap the all the list item

My suggestion Css Code

/* List title font-size */
.user-items-list .list-section-title {
  font-size: 2.8rem;
  font-weight: 500;
}

/* Make user list clickable --start*/
.list-item-content__button-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.list-item-content__button-wrapper a {
  width: 100%;
  height: 100%;
  background: transparent !important;
  color: transparent !important;
}

.list-item {
  position: relative;
}

.list-item-content__button-container {
  height: 100%;
  margin-top: 0 !important;
}

/* Make user list item clickable --end*/

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

@bangank36Thank you so much! I overlooked the design function when adjusting the list. The button also works perfectly. If I wanted the title of the list to be another font (Poppins), do I add this? 

/* List title font-size */
.user-items-list .list-section-title {
  font: "Poppins";
  font-size: 2.8rem;
  font-weight: 500;
}

If not, how do I add it?

5 minutes ago, Ruadth said:

@bangank36Thank you so much! I overlooked the design function when adjusting the list. The button also works perfectly. If I wanted the title of the list to be another font (Poppins), do I add this? 

/* List title font-size */
.user-items-list .list-section-title {
  font: "Poppins";
  font-size: 2.8rem;
  font-weight: 500;
}

If not, how do I add it?

with the font css, you should add

font-family: 'Poppins'

Make sure that you 've already got the font on your site

Hope it can help you