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

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

2 Answers 2


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.

  • Thanks for the response. The theme used for the wordpress site is this one: themestats.com/wordpress-theme-exploreveg-2165459 . The url is here: exploreveg.org/donate-compassionate-action-animals Feb 9, 2018 at 16:59
  • 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. Feb 9, 2018 at 18:14
  • I think this may be a CiviCRM issue. Feb 19, 2018 at 6:13
  • 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! Feb 19, 2018 at 6:19
  • You can edit your original question to include a screenshot. Also, try the demo WordPress site at demo.civicrm.org and see if it happens there - that's the first step toward filing an issue. See civicrm.org/bug-reporting Feb 19, 2018 at 16:53

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.