Answers.Body: <p>The public-facing donation and event pages inherit their look and feel from the Wordpress theme.  If there's overlapping text, it can't be fixed within CiviCRM; it must be fixed within WordPress.  You should be able to confirm this by loading a Wordpress default theme like twentyseventeen on your site (ideally a test version of your site), and the problem shouldn't exist.</p>
  
  <p>As for which part of the theme needs fixing, it's very hard to troubleshoot without seeing the CSS of the page itself, which means posting the URL in question.  That said - you'll likely get better answers in the Wordpress Stack Exchange than here.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-09T16:59:45.557Z
Answers.Text: Thanks for the response. The theme used for the wordpress site is this one: https://www.themestats.com/wordpress-theme-exploreveg-2165459 . The url is here: https://www.exploreveg.org/donate-compassionate-action-animals/
Answers.UserDisplayName: Arthur Goldstein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-09T18:14:20.970Z
Answers.Text: I took a look, and this is definitely a Bootstrap issue.  As both a CiviCRM developer and long-time vegan, I wish I had better Bootstrap chops to give you some help!  I would talk to your theme developer (looks like Dave Rolsky) and ask them to make a fix.  They shouldn't need to know anything about CiviCRM to solve this problem.
Answers.UserDisplayName: Jon G - Megaphone Tech
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-19T06:13:33.883Z
Answers.Text: I think this may be a CiviCRM issue.
Answers.UserDisplayName: Arthur Goldstein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-19T06:19:27.833Z
Answers.Text: I checked with Dave Rolsky who said he thinks it's a CiviCRM issue. I also created a basic WordPress/CiviCRM test site without setting the theme and got some overlap. Not as much as my original possibly because fewer text is bolded. Unfortunately I cannot link to the test site nor have figured out how to paste an image into this message.
  Where would I file an issue on this?
  Thanks!
Answers.UserDisplayName: Arthur Goldstein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-19T16:53:43.387Z
Answers.Text: You can edit your original question to include a screenshot.  Also, try the demo WordPress site at https://demo.civicrm.org and see if it happens there - that's the first step toward filing an issue. See https://civicrm.org/bug-reporting
Answers.UserDisplayName: Jon G - Megaphone Tech
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-21T04:44:43.150Z
Answers.Text: Thanks, I uploaded an image. I tried demo.civicrm.org but not sure how to turn on the civicontribute component. Suggestions?
Answers.UserDisplayName: Arthur Goldstein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-09T07:30:03.367Z
Answers.LastActivityDate: 2018-02-09T07:30:03.367Z
Answers.UserDisplayName: Jon G - Megaphone Tech
Answers.Body: <p>It's a styling choice.</p>
  
  <p>I've found a lot of Civi's default styling flexibility to be lacking, especially with adaptive window sizes. Thus I've had to make a bunch of adjustments to my child theme to override Civi's default CSS.</p>
  
  <p>For instance, I bet Civi has your "Contribution Amount" has a parent div with the class "label" - being styled thusly:</p>
  
  <pre><code>.crm-container .crm-section .label {
      float: left;
      width: 17%;
      text-align: right;
  }
  </code></pre>
  
  <p>These explicit styles can interfere with your own style sheets, especially on small screens.</p>
  
  <p>Something I'd like to play with for my own styling wishes is <a href="https://civicrm.stackexchange.com/questions/2857/can-i-use-a-custom-style-sheet-css-for-user-modifications/2858#2858">Disabling CiviCRM CSS</a>. Maybe you should give it a shot.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-01T11:05:16.673Z
Answers.LastActivityDate: 2018-03-01T11:05:16.673Z
Answers.UserDisplayName: Evan
Body: <p>Is there a straightforward way to allow mobile device browsers to properly render and handle a donations/event page?</p>
  
  <p>I am trying to set up donations on a Wordpress CiviCRM installation so that the text does not overlap on mobile devices. The same issue was referenced and fixed for a Drupal installation <a href="https://github.com/webaccess/com.webaccessglobal.simpledonate" rel="nofollow noreferrer">here</a></p>
  
  <p>I did install the extension "Simple Donate" but it stripped off information from the donation page. Plus it did not work, I could only look at it in test mode.<a href="https://i.sstatic.net/H1TYr.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/H1TYr.png" alt="enter image description here"></a></p>
  
Tags: <wordpress><civicontribute><mobile><bootstrap>
Title: Donations page on mobile phone not formatting properly on Wordpress site
ThreadText: # Donations page on mobile phone not formatting properly on Wordpress site
  
  (Asked by: username_0 on 2018-02-09)
  
  Is there a straightforward way to allow mobile device browsers to properly render and handle a donations/event page?
  
  I am trying to set up donations on a Wordpress CiviCRM installation so that the text does not overlap on mobile devices. The same issue was referenced and fixed for a Drupal installation [here](https://github.com/webaccess/com.webaccessglobal.simpledonate)
  
  I did install the extension "Simple Donate" but it stripped off information from the donation page. Plus it did not work, I could only look at it in test mode.[![enter image description here](https://i.sstatic.net/H1TYr.png)](https://i.sstatic.net/H1TYr.png)
  
  **Tags:** wordpress, civicontribute, mobile, bootstrap
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2018-02-09. Score: 1
  
  The public-facing donation and event pages inherit their look and feel from the Wordpress theme. If there's overlapping text, it can't be fixed within CiviCRM; it must be fixed within WordPress. You should be able to confirm this by loading a Wordpress default theme like twentyseventeen on your site (ideally a test version of your site), and the problem shouldn't exist.
  
  As for which part of the theme needs fixing, it's very hard to troubleshoot without seeing the CSS of the page itself, which means posting the URL in question. That said - you'll likely get better answers in the Wordpress Stack Exchange than here.
  
  > **Comments:**
  > **username_0**: Thanks for the response. The theme used for the wordpress site is this one: https://www.themestats.com/wordpress-theme-exploreveg-2165459 . The url is here: https://www.exploreveg.org/donate-compassionate-action-animals/  
  > **username_1**: I took a look, and this is definitely a Bootstrap issue.  As both a CiviCRM developer and long-time vegan, I wish I had better Bootstrap chops to give you some help!  I would talk to your theme developer (looks like Dave Rolsky) and ask them to make a fix.  They shouldn't need to know anything about CiviCRM to solve this problem.  
  > **username_0**: I think this may be a CiviCRM issue.  
  > **username_0**: I checked with Dave Rolsky who said he thinks it's a CiviCRM issue. I also created a basic WordPress/CiviCRM test site without setting the theme and got some overlap. Not as much as my original possibly because fewer text is bolded. Unfortunately I cannot link to the test site nor have figured out how to paste an image into this message. Where would I file an issue on this? Thanks!  
  > **username_1**: You can edit your original question to include a screenshot.  Also, try the demo WordPress site at https://demo.civicrm.org and see if it happens there - that's the first step toward filing an issue. See https://civicrm.org/bug-reporting  
  > **username_0**: Thanks, I uploaded an image. I tried demo.civicrm.org but not sure how to turn on the civicontribute component. Suggestions?  
  
  ---
  
  ### Answer by username_2 on 2018-03-01. Score: 0
  
  It's a styling choice.
  I've found a lot of Civi's default styling flexibility to be lacking, especially with adaptive window sizes. Thus I've had to make a bunch of adjustments to my child theme to override Civi's default CSS.
  For instance, I bet Civi has your "Contribution Amount" has a parent div with the class "label" - being styled thusly:
  .crm-container .crm-section .label {
      float: left;
      width: 17%;
      text-align: right;
  }
  
  These explicit styles can interfere with your own style sheets, especially on small screens.
  Something I'd like to play with for my own styling wishes is Disabling CiviCRM CSS. Maybe you should give it a shot.
  
  
  ---
  
  