Jump to content

How to Add a Subhead to a List Block

Recommended Posts

1 hour ago, Cambrie said:

Site URL: https://www.brazenfitness.com/

I'm trying to add a subhead underneath the Our Method Line on the HomePage. I can't find a prebuilt section that works, does anyone have a custom code I can add in? 

Screen Shot 2021-12-08 at 10.45.24 PM.png

Do you mean creating an description below title or something like navigator?

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
5 hours ago, Cambrie said:

Yes, just a description, 2 lines of text that is smaller than the heading size, just more of a paragraph sized font. 

 

Try adding to Home > Design > Custom Css

section[data-section-id="61aa37193dc07b255b318f91"] {
	.list-section-title {
		p {
			&:after {
				content: 'your description your descriptionyour description your description your description';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -15%;
				font-size: 10px;
				display: inline-block;
				line-height: 1;
			}
			position: relative;
		}
	}
}

Change the content as you wish

Let me know how it works on your site

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

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
On 12/12/2021 at 9:22 PM, Cambrie said:

Also - when I view it on mobile, it's not formatting properly and is overlapping with the image. See attached. 

Screen Shot 2021-12-12 at 9.21.31 AM.png

Don't remove above code. Add this to Design > Custom CSS

/* Mobile-Our Method subtext */
@media screen and (max-width:767px) {
section[data-section-id="61aa37193dc07b255b318f91"] .list-section-title p:after {
    width: 100% !important;
    top: 150% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/14/2021 at 10:17 PM, Cambrie said:

Thank you so so much! That did the trick!

The text is a bit narrow on tablet. If you need to fix on both tablet + Mobile. Just change 767px in above code to 991px

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.