We are having problems when viewing our contribution pages on mobile platforms, because of the width of the screen some of the text is shown on top of other text, making it hard to read:

enter image description here

We have the same problem in many other places on our contribution pages

Tested on iOS+Safari and on Android+Chrome

What is the easiest and most future-safe way to fix this problem?

Grateful for help and with kind regards, Tord


Render all CiviCRM public pages in a responsive CMS theme (eg a bootstrap one) and then add some css for the labels - I typically position the labels above the input boxes (on form) and above the answers (on confirm and thank you) for small screen sizes.

  • 2
    To specify just these labels, we use this on our Drupal-based install: body.page-civicrm-contribute-transact #crm-main-content-wrapper .crm-section .label {float: none; text-align: left; width: auto;} Feb 5 '17 at 17:21
  • 1
    Thanks Allen! I'm on my phone - couldn't copy/paste and did not want to guess 😀 Feb 5 '17 at 17:29
  • 1
    @KarinG @Allen Thank you so much, this works! Actually we were already using bootstrap for our public site so adding this to our bootstrap sub-theme was simple. I wrapped your code inside a media query: @media screen and (max-width: 768px){__your_code___}
    – sunyata
    Feb 6 '17 at 13:14
  • Glad it worked for you! Feb 6 '17 at 16:05
  • The code from Allen works great. It would be nice to see something that put the labels on the fields for space-saving on mobile. 50% of our users are mobile now, so it becomes increasingly important
    – Zachary
    Jul 11 '19 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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