Okay
  Public Ticket #2482579
Is there a way to specify different manual styles for mobile within the popup?
Closed

Comments

  •  4
    stimulant_envato started the conversation

    In the manual "CSS" or "Style" text fields, is there a way to specify different classes or styles to be applied on mobile?

  •  562
    Gabriel replied

    Yes. There are two options:

    1. Duplicate the existing section. Style one of them for desktop and the other for mobile.

    On the desktop section, go to settings, scroll to mobile and check "hidden sm". This will hide it on mobile and tablet.

    On the mobile section, check "visible sm". This will only show it on mobile and tablet.

    2. Add a class to CSS field (let's say "custom-style"). Then add this to Theme Options - Customizations - CSS Global:

    /* Desktop Style */
    .custom-style {
    color: #fff;
    }
    /* Mobile Style */
    @media (max-width: 992px) {
    .custom-style {
    color: #000;
    }
    }

    This @media is called media query. It limits the styling to the desired screen size.

  •  4
    stimulant_envato replied

    Cool, I had figured out the trick to duplicate the sections, I just wasn't sure if there was a better way to integrate the @media selector.