CODEWITHSUNDEEP
salesforcesalesforce-lightningomnis-studio-8vlocity
Rodolfo Barreto
Rodolfo Barreto

Reputation: 1

Responsive Font Size Implementation in OmniStudio Text Block

I'm currently working on a project in OmniStudio, and I need to make the font size responsive for a text block. The requirement is to have the font size set to 12px for mobile devices and 14px for desktop devices.

Here's the existing HTML code for the text block:

<p>
    <span style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;">Text Example</span>
</p>

Upvotes: 0

Views: 45

Answers (1)

Youth Dream
Youth Dream

Reputation: 992

you can use media query to change font-size in Mobile and Desktop devices. I provide sample code:

<p>
    <span class="responsive-text" style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;">
        Text Example
    </span>
</p>

<style>
    // This is for Mobile device, you can adjust the max-wdith based on your requirements
    @media only screen and (max-width: 767px) { 
        .responsive-text {
            font-size: 12px !important;
        }
    }

    // This is for Mobile device, you can adjust the min-width
    @media only screen and (min-width: 768px) { // This is for Desktop device
        .responsive-text {
            font-size: 14px !important;
        }
    }
</style>

Upvotes: 0

Related Questions