Jump to content

How to adjust aspects of an auto-layout list?

Recommended Posts

(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!

Link to comment
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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Edited by Ruadth
Link to comment
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

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.