How to Add a Subhead to a List Block

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? 

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? 

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

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

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

Thanks very much. It's looking great. I increased the font size a bit and like this, size but now I'd like to add some space beneath the subhead, in between it and the images. Can you send the code for that? 

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

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. 

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;
}
}

Thank you so so much! That did the trick!

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

For anyone looking for a simple fix to this:

Within the "title" section of the List Contents window, Add your main heading, then the subheading.  BOLD the subheading and then go to Design>Custom CSS.  Enter the following: 

Section ID{
.list-section-title p strong{
    display: block;
    font-size: 1.6rem !important;
    font-family: 'GothamBook' !important;
    color: hotpink !important;
  }
}

The display: block attribute forces the bolded text to flow to a new line.  ".list-section-title p" identifies the list section title, and the "strong" specifies only the BOLDED text.  The Section ID ensures that this only happens within that specific section.  Then simply match your site subheading text to the font attributes listed in the code above.  

To adjust mobile font sizes, wrap the code in a media query for phones and tablets, like this:

Section ID{
@media screen and (max-width: 641px){
display: block;
color: hotpink;
}}

and

Section ID{
@media screen and (max-width: 780px){
display: block;
color: hotpink;
}}