Mobile Styling

[Community Alums]

Has anyone changed or add some style sheets for mobile?

I need to have bigger fonts and bigger icons for mobile.

Any solution would be appreciated.

[Chandra Prakash]

Hi,

For this you can use "CSS Media Queries". In this CSS will effective whenever its condition matches.

/* On screens that are 992px wide or less, the font size is 15px */
@media screen and (max-width: 992px) {
    body {
        font-size: 15px;
    }
}

/* On screens that are 600px wide or less, font size is 10px */
@media screen and (max-width: 600px) {
    body {
        font-size: 10px;
    }
}

 Also you can refer this thread,

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Mark Correct or Helpful if it is so.

Regards,

Chandra Prakash

[Community Alums]

Hi Chandra,

thanks for the reply. where in ServiceNow I can find it? we are in kingston release.

thanks,

[Chandra Prakash]

Hi,

Try this in CSS - SCSS block of your widget

/* On screens that are 500px wide or less, the font size is 20px */
@media screen and (max-width: 500px) {
    .deviceWidth{
        font-size: 20px;
      	background-color: red;
    }
}

/* On screens that are 200px wide or less, font size is 50px */
@media screen and (max-width: 200px) {
    .deviceWidth {
        font-size: 50px;
      	background-color: yellow;
   

and for HTML Template

<div>
  <p class="deviceWidth">Test Fonts</p>
<div>

You can set the width size for mobile or Tablet accordingly with 

@media only screen and (max-width: XXX px) and (min-width: XXX px)  {...}

Please let me know if you have any doubts.

Mark Correct or Helpful if it is so.

Regards,

Chandra Prakash