1

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

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
5
  • 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;}
    – Allen Hutchison
    Commented Feb 5, 2017 at 17:21
  • 1
    Thanks Allen! I'm on my phone - couldn't copy/paste and did not want to guess 😀
    – KarinG - Semper IT
    Commented Feb 5, 2017 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
    Commented Feb 6, 2017 at 13:14
  • Glad it worked for you!
    – Allen Hutchison
    Commented Feb 6, 2017 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
    Commented Jul 11, 2019 at 15:41

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.