1
0
-1
1 answer
- 10-1
You may find these media queries a helpful start. You would add them to Website > Custom CSS.
@media only screen and (min-device-width : 350px) and (max-device-width : 550px) { p { font-size: 30px; line-height: 34px; } h1, .pageCenterTitle { font-size: 30px; line-height: 34px; } h2 { font-size: 30px; line-height: 34px; } h3 { font-size: 30px; line-height: 34px; } label { font-size: 40px; line-height: 44px; } ul, li { font-size: 40px; line-height: 44px; } table#animalSummary { font-size: 30px; line-height: 34px; } table#animalDetailsAbout { font-size: 30px; line-height: 34px; } table#description { font-size: 30px; line-height: 34px; } div#editableAnimalDetailBottom { font-size: 30px; line-height: 34px; } div#qualities { font-size: 30px; line-height: 34px; } 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; } #headerMenu { border-bottom: 0px; border-top: 0px; vertical-align: center; } #m0m { padding: 10px; } .menuLevel0InnerOut, .menuLevel0InnerOver, .menuLevel0InnerDown { font-size: 28px; } .menuLevel1InnerOut, .menuLevel1InnerOver, .menuLevel1InnerDown { font-size: 30px; padding-top: 15px; padding-bottom: 15px; } }
Add your comment...
How can we make our site more user friendly with larger type and touch areas for mobile devices? We are using layout 109.
I'm curious how this worked for you? I added the CSS code mentioned in this post. There were a few sets of text that I had set a specific font size that came out small–easy enough to adjust. I did notice on the phones it does a weird screen size adjustment, shrinking down a bit and then stops. Can that be prevented? Thanks , S
Stacey, it's possible you have some customizations that are overriding these styles. If you'd like us to take a look, please open a support ticket here: https://rescuegroups.org/support/
Warmly,
Michelle