Answers.Body: <p>You can add some css for the label tag that copies the style of the other text. Some margin or padding css on the link tag will take care of the spacing issue. As to the div.content, just be more specific on your selection so it only styles the labels you want to style. You should be able to select deeper than the div.content for those labels Or you might have to start your selection all the way up at the specific page to keep it from impacting the rest of the site. </p>
  
  <p>There is no way around it, you might have to make adjustments in the future if your theme changes (just like you said). </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-02T20:07:00.277Z
Answers.Text: Seems like I just have to set a style for the div, as the offending text is outside the label tags, so I can't address it that way. Good idea on the margin though, that fixed the spacing issue.
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-02T21:41:34.497Z
Answers.Text: You can target the text itself no matter if it is in or outside the label tag. You can get deeper than the div to target the text.
Answers.UserDisplayName: Iowa Boy
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-03T19:54:11.343Z
Answers.Text: I'm sorry, I'm not following. What I have is:
  <div class=content>
  <label>blah blah blah</label>    every month
  </div>
  And I don't see how I can apply a style to "every month" without applying it to all text within div class=content.
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-04T03:22:31.663Z
Answers.Text: There has to be some tag around the "every month" <p> or <h3> or something. The details where you have "blah blah blah" are what you are looking for. What is between every month and </div> ?
Answers.UserDisplayName: Iowa Boy
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-04T16:38:06.877Z
Answers.Text: That's the problem. There literally is no tag between <div> and that text. It's <div class=content>[a label and input with their closing tags] every month</div>.
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-04T17:49:04.693Z
Answers.Text: Can you post the url to the page?
Answers.UserDisplayName: Iowa Boy
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-04T21:46:55.410Z
Answers.Text: It now looks OK, since I've applied the text styling to the div, but since this is for all contribution pages, that makes me pretty uncomfortable.
  https://secure.wildsight.ca/civicrm/contribute/transact?reset=1&id=1
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-05T00:04:07.453Z
Answers.Text: So then add more to the selector on the css so you are just pointing at that page and div.
Answers.UserDisplayName: Iowa Boy
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-06T01:58:21.577Z
Answers.Text: OK, I see what you're getting at. Thanks!
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-06T02:13:13.683Z
Answers.Text: You need to mark this as answered.
Answers.UserDisplayName: Iowa Boy
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-11-30T00:57:44.697Z
Answers.LastActivityDate: 2019-11-30T00:57:44.697Z
Answers.UserDisplayName: Iowa Boy
Answers.Body: <p>There is a new extension which makes improvements in this area</p>
  
  <p><a href="https://lab.civicrm.org/extensions/pricesetvisibility/tree/master" rel="nofollow noreferrer">https://lab.civicrm.org/extensions/pricesetvisibility/tree/master</a></p>
  
  <p><a href="https://i.sstatic.net/Qe5e0.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Qe5e0.gif" alt="enter image description here"></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-18T23:47:18.530Z
Answers.Text: sorry - realise you were specifically focussed on the 'monthly' rather than the amounts
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-19T18:15:54.330Z
Answers.Text: What are you using for the look in the example above?
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-19T20:47:02.960Z
Answers.Text: i assumed the extension was providing it
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-18T23:46:26.807Z
Answers.LastActivityDate: 2019-12-18T23:46:26.807Z
Answers.UserDisplayName: petednz - fuzion
Body: <p>If you set up a contribution page to accept recurring contributions, the label for this option on the page is "I want to contribute this amount FREQUENCY" where FREQUENCY is from the contribution page settings (e.g. every month). The "I want to contribute this amount" part is inside a label tag, while the "every month" is just plain text on the page, not inside any tags, so if a theme changes the label font, this looks terrible. There is also an extra space before "every month" so it looks like this "I want to contribute this amount  every month".</p>
  
  <p>Anyone know how to deal with this? The div that this text is all inside has class "content" which is used in other places, so not a great way to deal with this.</p>
  
Tags: <contribution-page><recurring-contributions><css>
Title: Recurring contributions frequency label ("every month") is unstyleable - looks bad
ThreadText: # Recurring contributions frequency label ("every month") is unstyleable - looks bad
  
  (Asked by: username_0 on 2019-11-28)
  
  If you set up a contribution page to accept recurring contributions, the label for this option on the page is "I want to contribute this amount FREQUENCY" where FREQUENCY is from the contribution page settings (e.g. every month). The "I want to contribute this amount" part is inside a label tag, while the "every month" is just plain text on the page, not inside any tags, so if a theme changes the label font, this looks terrible. There is also an extra space before "every month" so it looks like this "I want to contribute this amount every month".
  
  Anyone know how to deal with this? The div that this text is all inside has class "content" which is used in other places, so not a great way to deal with this.
  
  **Tags:** contribution-page, recurring-contributions, css
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2019-11-30. Score: 0 | Accepted answer
  
  You can add some css for the label tag that copies the style of the other text. Some margin or padding css on the link tag will take care of the spacing issue. As to the div.content, just be more specific on your selection so it only styles the labels you want to style. You should be able to select deeper than the div.content for those labels Or you might have to start your selection all the way up at the specific page to keep it from impacting the rest of the site.
  
  There is no way around it, you might have to make adjustments in the future if your theme changes (just like you said).
  
  > **Comments:**
  > **username_0**: Seems like I just have to set a style for the div, as the offending text is outside the label tags, so I can't address it that way. Good idea on the margin though, that fixed the spacing issue.  
  > **username_1**: You can target the text itself no matter if it is in or outside the label tag. You can get deeper than the div to target the text.  
  > **username_0**: I'm sorry, I'm not following. What I have is: <div class=content> <label>blah blah blah</label>    every month </div> And I don't see how I can apply a style to "every month" without applying it to all text within div class=content.  
  > **username_1**: There has to be some tag around the "every month" <p> or <h3> or something. The details where you have "blah blah blah" are what you are looking for. What is between every month and </div> ?  
  > **username_0**: That's the problem. There literally is no tag between <div> and that text. It's <div class=content>[a label and input with their closing tags] every month</div>.  
  > **username_1**: Can you post the url to the page?  
  > **username_0**: It now looks OK, since I've applied the text styling to the div, but since this is for all contribution pages, that makes me pretty uncomfortable. https://secure.wildsight.ca/civicrm/contribute/transact?reset=1&id=1  
  > **username_1**: So then add more to the selector on the css so you are just pointing at that page and div.  
  > **username_0**: OK, I see what you're getting at. Thanks!  
  > **username_1**: You need to mark this as answered.  
  
  ---
  
  ### Answer by username_2 on 2019-12-18. Score: 0
  
  There is a new extension which makes improvements in this area
  
  <https://lab.civicrm.org/extensions/pricesetvisibility/tree/master>
  
  [![enter image description here](https://i.sstatic.net/Qe5e0.gif)](https://i.sstatic.net/Qe5e0.gif)
  
  > **Comments:**
  > **username_2**: sorry - realise you were specifically focussed on the 'monthly' rather than the amounts  
  > **username_0**: What are you using for the look in the example above?  
  > **username_2**: i assumed the extension was providing it  
  
  ---
  
  