Different Header Slider Title text size on mobile… how?

  • Resolved gasmas75

    (@gasmas75)


    7 years, 7 months ago

    Hi all,
    Using a Header Image and Slider for my posts (https://www.techliving.gr) and I want to have different font attributes for desktop and mobile.
    Tried via the options for all articles–>font customizer–>Header–>Slideshow title but it changes for both mobile and desktop.
    Tried to override hph-front.min.css file via a child theme but somehow it doesn’t change anything.
    The lines I tried are:

    @media only screen and (max-width: 719px) 
   .pc-section-slider h1.very-big {
      font-size: 70px;
      line-height: 145px;
    }
    .carousel-caption > h1 + h3 {
        margin-top: 0;
        margin-bottom: 1.25em;
        font-size: 1.728em;
    }

    Somehow it seems to be getting inline styles.
    Any help appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author presscustomizr

    (@nikeo)

    Hi, decoupling mobile and desktop font settings is not yet implemented with the font customizer. But it should be I agree.
    For the moment, you’ll need to do it manually with some CSS code like the example provided.
    Your code is not taken into account for the moment because the theme applies in priority the font customizer option. ( this is the inline style that you see )
    You need to reset the font option previously set in font customizer–>Header–>Slideshow

    I hope this will help !

    Thread Starter gasmas75

    (@gasmas75)

    Hi Nicolas, thanks for the quick reply.
    I’ve been trying with various ways but with no luck. The only way I can override the css file is by tempering with Font Customizer (turning on the override any other style option). But this does a change to both desktop and mobile styles.

    Hi,

    The css code that you had provided is missing two curly brackets. There should be curly brackets enclosing your inner two css code blocks.

    For example.
    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Thank you

    Thread Starter gasmas75

    (@gasmas75)

    Hi Deznel,
    That helped! Thanks… I also corrected the code and disabled the ‘override any other style’ on Font Customizer/Header section.

    @media only screen and (max-width: 719px) {
   .pc-section-slider .carousel-caption .hph-title {
      font-size: 20px !important;
      line-height: 25px !important;
    }
}

    Hi,

    You are welcome!
    Glad to be of some help.

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Different Header Slider Title text size on mobile… how?’ is closed to new replies.

Tags