Response Pages for Mobile Devices

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Please sign in to see details of an important advisory in our Customer Advisories area.

Response Pages for Mobile Devices

L4 Transporter

Has anyone written custom response pages that can detect a Mobile browser and changes the HTML format to fit the browser?

1 accepted solution

Accepted Solutions

I think I found a better approach:

<meta name="viewport" content="initial-scale=1.0">

<style>

  #content {

    border:3px solid#aaa;

    background-color:#fff;

    margin:1.5em;

    padding:1.5em;

    font-family:Tahoma,Helvetica,Arial,sans-serif;

    font-size:1em;

  }

  h1 {

    font-size:1.3em;

    font-weight:bold;

    color:#196390;

  }

  b {

    font-weight:normal;

    color:#196390;

  }

</style>

This works better for various screen sizes and also seemed to help with the GlobalProtect login page.

View solution in original post

4 REPLIES 4

L4 Transporter

If you customize the block page and put this in the "styles" section, it should look better:

@media only screen and (max-device-width: 400px) {

     body {

          width: 82%;

     }

     #content {

          float: none;

          width: 100%;

          font-size: 300%;

     }

     h1 {

          font-size: 180%;

     }

}

Mike

Thanks Mike!!  It works fine, I had to tweak the font size percentages a bit for the iPhone.  However, in the default GlobalProtect Login Response Page there's the pan_form/ variable.  Is there a way to increase the font size for those form items? I tried putting the <h1> class tags around the <pan_form/> tag but, it doesn't change the size of the form items.

Kind regards,

Jeff

I think I found a better approach:

<meta name="viewport" content="initial-scale=1.0">

<style>

  #content {

    border:3px solid#aaa;

    background-color:#fff;

    margin:1.5em;

    padding:1.5em;

    font-family:Tahoma,Helvetica,Arial,sans-serif;

    font-size:1em;

  }

  h1 {

    font-size:1.3em;

    font-weight:bold;

    color:#196390;

  }

  b {

    font-weight:normal;

    color:#196390;

  }

</style>

This works better for various screen sizes and also seemed to help with the GlobalProtect login page.

Mike,

It works like a charm!!!  Thank you very much!

On another note, do you know the name of the image file that gets stored in the /images folder on the PANW for the Custom Logo for the Main UI?

Kind regards,

Jeff

  • 1 accepted solution
  • 3116 Views
  • 4 replies
  • 1 Likes
Like what you see?

Show your appreciation!

Click Like if a post is helpful to you or if you just want to show your support.

Click Accept as Solution to acknowledge that the answer to your question has been provided.

The button appears next to the replies on topics you’ve started. The member who gave the solution and all future visitors to this topic will appreciate it!

These simple actions take just seconds of your time, but go a long way in showing appreciation for community members and the LIVEcommunity as a whole!

The LIVEcommunity thanks you for your participation!