How can I make my online forms more readable on mobile devices?

 
1
0
-1

We would like to make our Online Forms more readable on smaller screens. How can we do this?

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -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;
	}
}
        CommentAdd your comment...