Search

 
1
0
-1

How can we make our site more user friendly with larger type and touch areas for mobile devices? We are using layout 109.

  1. Stacey McVey

    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

  2. Michelle Peters-Spivack [RG]

    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

CommentAdd your comment...

1 answer

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