Support » Plugin: Enlighter - Customizable Syntax Highlighter » Smaller font size on mobile

  • Resolved firasalhafez

    (@firasalhafez)


    Hey,

    I love your plug-in. But is there an option to have a smaller font-size on mobile only? I know how to change the font-size in the theme customizer, but this affects everything.

    Thanks in advance!

    Best,
    Firas

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Andi Dittrich

    (@andi-dittrich)

    just add some custom css which matches the enlighter wrapper class and add a related media query – that’s it

    Thread Starter firasalhafez

    (@firasalhafez)

    Thanks for the advice. I am not into css at all. Nonetheless, for those of you having the same problem, this is what I came up with:

    /* Small devices (mobile/tablets, 767px and below) */
    @media only screen and (max-width: 766px) {
    selector .enlighter-t-wpcustom{
    font-size: 0.4em;
    }
     selector .enlighter-t-wpcustom.enlighter-v-inline{
    font-size: 0.95em;
    }
    }
    
    /* Medium devices (tablets/desktops, 768px and up) */
    @media only screen and (min-width: 768px) {
    selector .enlighter-t-wpcustom{
    font-size: 0.6em;
    }
     selector .enlighter-t-wpcustom.enlighter-v-inline{
    font-size: 0.95em;
    }
    }
    
    /* Large devices (large laptops and desktops, 1168px and up) */
    @media only screen and (min-width: 1168px) {
    selector .enlighter-t-wpcustom{
    font-size: 0.95em;
    }
     selector .enlighter-t-wpcustom.enlighter-v-inline{
    font-size: 0.95em;
    }
    }
    
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.