How do I increase font on smaller screens

 
1
0
-1

How do I increase the font size for Status and Summary on smaller screens.  On my phone, they are showing up very small compared to the other font.  I have custom CSS for smaller screens for the h1 thru h4 headings, but not sure how to change it for Status and Summary.  Also, if there is relationship info, it is also showing up small.

Thanks,

Stacey

    CommentAdd your comment...

    4 answers

    1.  
      1
      0
      -1

      Since the built-in layout is obsolete, should we transition to something else?  

      Summary to the right of the Name field on the edit screen.  In Lucy's case it has COMING SOON!

      Thank you for the additional suggestion on the broken link.

      Thanks, Stacey


      1. Brandon A Scivolette

        Gotcha. So, your screenshot is of the backend, and there's nothing we can do to override the backend look/feel.

        We have some options when it comes to the frontend (e.g. the website that is accessible to the public), so now that I know your referring to the "COMING SOON" text I can provide another CSS override. This override essentially resets the style to the default which seems a bit bland given its purpose and placement. I can change the style if you'd like just let me know what you want.

        You'll add this code in the same place as the previous code:

        #animalSummary {
    color: inherit;
    font-size: inherit;
}


        Regarding your question, "Since the built-in layout is obsolete, should we transition to something else?" -

        The entire website service provided by RG is built with antiquated code. No disrespect to RG, because technology moves fast, and it can be difficult to keep up with. That said, all of the layouts provided are built this way, so the only true solution is to completely rebuild the website service from scratch. I doubt that will happen.

        So, all we can do is apply overrides wherever they are needed. Although, as I mentioned, this isn't always possible without access to the source code (which we don't have). There are also limitations to what we can do with responsive styling (when the website resizes and adjusts based on your device/screen). We can add media queries to target specific viewports (screen sizes), but in my experience it creates issues because of how old the underlying code is. To that end, our website is using minimal media queries for responsiveness.

        Still, a lot can be done this way (CSS overrides). You can see what I was able to do with CSS on our (Rebels Rescue) website.

      2. Stacey McVey

        Thanks.  I have quite a bit of CSS.  I made the changes you suggested for AnimalStatus and Summary.  I put it in the section I have on just small media screens.  

        Thank you

      CommentAdd your comment...
    2.  
      1
      0
      -1

      The issues you are having stem from using one of RG's built-in layouts which are, very old. Like, ancient. Since we don't have access to the source code we're limited as to what can be done. But I'll provide the fixes that are possible.

      1. Status: Using the code provided below we can override the default styling and reset it so it looks like the other line items
      2. Summary: I don't see a field named "Summary", please provide more information
      3. Relationships: Unfortunately, the parent <div> in this case doesn't have an ID, or any sort of unique identifier, which is how we normally target a specific section or text. And since this section is conditional (only visible when relationships exist), I can't attempt a more advanced approach because the result will likely be unintentional style changes being applied on animal profile pages that don't have the relationship section showing

      In the RG portal:

      1. Website > Custom CSS
      2. Add the code below
        1. If there is existing code you can add the new code below the last line of the existing code
      #fieldStatus {
    color: inherit;
    font-size: inherit;
}



      Additional suggestions:

      1. You're currently showing the "bookmark and share" block, but it's broken and no longer works. I recommend disabling it under website service related settings > show the animal detail page share button > No
        CommentAdd your comment...
      1.  
        1
        0
        -1

        Alexa - Status and Relationships are both small on my phone.  https://www.mokanbcrescue.org/animals/detail?AnimalID=20933659
        Lucy -  Status and Summar are both very small on my phone:  https://www.mokanbcrescue.org/animals/detail?AnimalID=21108359

        I would like Status and Summary to be the same font size as the surrounding font of Species, Rescue ID, etc
        I would like Relationships to be the same font size as the More About Alexa text.

        Thank you,
        Stacey

          CommentAdd your comment...
        1.  
          1
          0
          -1
          1. Provide a URL to the webpage that has Status and Summary
          2. What font size do you want this text to be?
            CommentAdd your comment...