Answers.Body: <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-05T17:21:30.973Z
Answers.Text: 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;}
Answers.UserDisplayName: Allen Hutchison
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-05T17:29:33.600Z
Answers.Text: Thanks Allen! I'm on my phone - couldn't copy/paste and did not want to guess 
Answers.UserDisplayName: KarinG - Semper IT
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-06T13:14:37.063Z
Answers.Text: @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___}```
Answers.UserDisplayName: sunyata
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-06T16:05:27.670Z
Answers.Text: Glad it worked for you!
Answers.UserDisplayName: Allen Hutchison
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-11T15:41:36.453Z
Answers.Text: 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
Answers.UserDisplayName: Zachary
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-05T16:28:31.143Z
Answers.LastActivityDate: 2017-02-05T16:28:31.143Z
Answers.UserDisplayName: KarinG - Semper IT
Body: <p>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:</p>
  
  <p><a href="https://i.sstatic.net/BDPFm.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/BDPFm.jpg" alt="enter image description here"></a></p>
  
  <p>We have the same problem in many other places on our contribution pages</p>
  
  <p>Tested on iOS+Safari and on Android+Chrome</p>
  
  <p><strong>What is the easiest and most future-safe way to fix this problem?</strong></p>
  
  <p>Grateful for help and with kind regards,
  Tord</p>
  
Tags: <contribution-page><css><theme><display>
Title: Contribution pages look strange on mobile
ThreadText: # Contribution pages look strange on mobile
  
  (Asked by: username_0 on 2017-02-05)
  
  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](https://i.sstatic.net/BDPFm.jpg)](https://i.sstatic.net/BDPFm.jpg)
  
  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
  
  **Tags:** contribution-page, css, theme, display
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-02-05. Score: 2 | Accepted answer
  
  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.
  
  > **Comments:**
  > **username_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;}  
  > **username_1**: Thanks Allen! I'm on my phone - couldn't copy/paste and did not want to guess   
  > **username_0**: @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___}```  
  > **username_2**: Glad it worked for you!  
  > **username_3**: 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  
  
  ---
  
  