1
0
-1
1 answer
- 10-1
Using a tool like Chrome Developer Tools you can inspect elements on your form and preview style edits.
Chrome Developer Tools: https://developer.chrome.com/docs/devtools/
To learn more about media queries, you can visit: https://www.w3schools.com/css/css3_mediaqueries.asp
For the RescueGroups.org Website Service, you can add the following to get you started.
@media only screen and (min-device-width: 250px) and (max-device-width: 550px) { p { font-size: 30px; line-height: 36px; } ul, li { font-size: 40px; line-height: 44px; } input, select { font-size: 30px; line-height: 34px; } input[type='radio'] { transform: scale(2); margin-left: 10px; margin-right: 10px; padding: 10px; } input[type="checkbox" i] { transform: scale(3); font-size: 30px; line-height: 34px; } }
For the RescueGroups.org Online Forms iFrame, you can add the following to get you started.
@media only screen and (min-device-width: 250px) and (max-device-width: 550px) { p { font-size: 2em; /* you can use a px value if you prefer */ line-height: 1.45em; } input, select { font-size: 30px; line-height: 34px; } input[type='radio'] { transform: scale(2); margin-left: 10px; margin-right: 10px; padding: 10px; } label { font-size: 24px; margin-bottom: 15px; margin-top: 15px; padding: 5px; } td { padding-left: 15px; padding-top: 30px; } input[type="checkbox" i] { transform: scale(3); font-size: 30px; line-height: 34px; padding-left: 25px; } }
Add your comment...
We would like to make our Online Forms more readable on smaller screens. How can we do this?