CiviCRM Stack Exchange is a question and answer site for administrators and users of the CiviCRM Constituent Relationship Management software. It only takes a minute to sign up.
Sign up to join this community
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.
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.
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.
