You are viewing limited content. For full access, please sign in.

Question

Question

Using CSS to change the font size of specific section headers (New Forms Designer)

asked on June 5, 2024

I am building an FAQ on one of my forms and have nested sections to produce topics and specific questions which can be expanded to reveal the detailed information.  I am TRYING to make the main topic section header bold and would like to decrease the font size of the sub-headers.  I cannot for the life of me figure this out! 

I can bold the header, but it then applies the bold setting to all sub-elements.  So, I created a normal css class which I have applied to the sub-sections.  This is working for what I need.  However, I cannot get LF to recognize anything for adjusting the font size.

I have tried this: 
#q62 .cf-section-header h1 {font-size:15px;line-height:15px;min-height:15px;}

0 0

Answer

SELECTED ANSWER
replied on June 5, 2024

Glad you got it working! Would you mind marking as an answer? :)

The min-height:15px; you had works fine if that's what you're after, just add it into the code below as it's own line like so:

#q76 label {
  font-size:24px;
  min-height:15px;
}

It doesn't need to be it's own line, I just find it helps with readability.

You could also set max-height for the subsections with smaller text.

0 0

Replies

replied on June 5, 2024

THANK YOU!!!!!  This is perfect!

1 0
replied on June 5, 2024

Try this:

#q76 label {
  font-size:24px;
}
#q62 label {
  font-size:15px !important;
}
0 0
replied on June 5, 2024

I have a similar setup and I use this with different css classes for each section: 

.section1 label.section-label {font-size: 14px;}

.section2 label.section-label {font-size: 32px;}

etc...

 

0 0
replied on June 5, 2024

How do you change the size of the header or the space between elements?  I struggle with CSS because I don't know how to figure out how to refer to things. LOL

0 0
SELECTED ANSWER
replied on June 5, 2024

Glad you got it working! Would you mind marking as an answer? :)

The min-height:15px; you had works fine if that's what you're after, just add it into the code below as it's own line like so:

#q76 label {
  font-size:24px;
  min-height:15px;
}

It doesn't need to be it's own line, I just find it helps with readability.

You could also set max-height for the subsections with smaller text.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.