Dynamic Font Size based on Device Type | Experience Community
Skip to main content

Dynamic Font Size based on Device Type

  • September 6, 2021
  • 1 reply
  • 146 views
N

We have 2 versions for each survey question. One version of the question is mobile and another version for non mobile devices to serve the different font size purpose. Now, we want single question and make it capable of understanding the device type using javascript or CSS. Please suggest the possibility of the same.  


1 reply

JeremyK
Level 3 ●●●
Forum|alt.badge.img+7
  • JeremyK
  • Level 3 ●●●
  • September 7, 2021

You can set this with the CSS media tag. Here's the w3school's page on how to use it. Should be something like
@media (max-width: 768px) {
    blockquote {
        font-size: 36px;
    }
    li {
        font-size: 36px;
    }
div {
        font-size: 36px;
    }
tr {
        font-size: 36px;
    }
p {
font-size:36px;
}
}
Basically, this is saying if the platform the user is viewing the survey from is less than 768px, then set the font size for the following elements. *Note: this elements list is not all-encompassing as I do not have knowledge to which elements you're utilizing in your survey, but you can easily add them by adding their tag and the font-size property, following the pattern above.

Terms & ConditionsAccessibility statement