Slider Heading text not responsive?

Asked on September 17, 2015 in Troubleshooting.

Hello,

Is it possible to make banner headding text fit small screens?

If you select in Slider options:
– large text size (because you want your header Title to display well on big screens…),
– choose Open Sans font
– and use long words for your banner title (i.e. “Exceptional Accomplishments”),

you will notice that on small screens the title will be cut off.

I cannot imagine that this theme is not fully responsive (not for text…)

Is there any way to make the heading text responsive?

My example is at http://try.layerswp.com/alpf36yqzbhit2e/

or http://www.responsinator.com/?url=http%3A%2F%2Ftry.layerswp.com%2Falpf36yqzbhit2e%2F

bacekjon108 Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on September 18, 2015.

    Hi there,

    Try font scaling requires javascript. which we have not implemented into Layers due to the complexity it adds to people trying to create custom styles. Instead we use basic media queries to set a new font size that works with mobile screens.  Not all fonts have the same width, height or thickness, so depending on your slide content, you may need to customize your mobile views. This is explained here:

    How to Customize the Mobile or Responsive Views

    The main problem with  “Exceptional Accomplishments” is that both of those words are long and the styling is not going to allow the word to break apart, so instead it ends up extending its container. (accomplishments in this case is 360px wide or so, with an added 40-60px of padding)

    You must use the Advanced option on the design bar in the slider widget, or the CSS panel in the main customizer menu to add a custom style that scales the font size on the screen sizes where it is too large. Example:

    /*------------------------------------------------*/
     /* layouts smaller than 600px, iPhone and mobiles */
     @media only screen
     and (max-width : 320px){
     section-title.large .heading { font-size: 2.5rem;}
     }
    

    Thanky you for your reply! I inserted your code in CSS panel and in advanced option in design Slider bar (for .heading selector) as sugested, but I see no change on small screens.

    Is there any other way, or am I doing something wrong?

    on September 21, 2015.

    Hi there,
    This code needs to go in one place or the other, not both. If you use the Advanced panel, you need to add the custom class to the style and not include the comments. This also assumes you have the widget title set to Large and are testing on a mobile screen that is only 320px wide (the title did not have overlap issues on screens larger than that) Example:

     
    @media only screen and (max-width : 320px){
     .customclass .section-title.large .heading { font-size: 2.5rem;}
     }
     
    on September 22, 2015.

    Thank you, but still not working. To be specific:

    • I use Layers child theme
    • In the General panel, Customizing CSS window has no code.
    • In the Sliders Widget, I click on the Advanced tab
    • In Custom CSS window I pasted:
      @media only screen and (max-width : 320px){
      .customclass .section-title.large .heading { font-size: 2.5rem;}
      }
    • In Custom Class Window I tried with the following selectors (one by one, bot none works):
      .section-title large
      .heading
      .section-title.large

    However, I see no change of font size on very small screen…

    on September 24, 2015.

    Hi there,

    ” .customclass”  does not exist unless you create it in the Advanced option. It illustrates the class name YOU choose and type into the Custom Class field of that option, which should have a more semantic name, like “home-slider”. This tutorial explains in great detail how the Advanced option works:
    https://docs.layerswp.com/doc/how-to-use-the-advanced-design-bar-option-to-add-custom-classes-to-widgets/

    To make it easier/apply to any future slides with a similar problem, try this code in the CSS panel of the customizer (remove the code in the widget)

    
    @media only screen and (max-width : 320px){
    
    .swiper-slide .heading { font-size: 2.5rem !important;}
    
    }
    
    

    Note you will only see it take effect on a mobile with a 320px wide screen, or testing your URL here:
    http://www.responsinator.com/?url=&device=iphone-5&orientation=portrait

    It is best if you do this on your own install of Layers, not from a try.layerswp.com site since customizations are not saved long there.

    on September 25, 2015.

    Got it, thank you, now it is working!

    on September 25, 2015.

    Responsive views are necessary to adjust web page size on every device. There are many articles that are available on the best essay writers in uk blog that is written by professional workers. The tips that are given in these contents are used by myself for fixing this issue.

    on August 31, 2020.

    I think your pictures are not very suitable for mobile devices because they are very wide. BY:  British essay writers – Essays Tigers.

    on September 17, 2020.

    Just pure classic stuff from you here. I have never seen such a brilliantly written article in a long time. I am thankful to you that you produced this! 먹튀검증사이트

    on March 11, 2021.

    I have read your article couple of times because your views are on my own for the most part. It is great content for every reader. 먹튀검증업체

    on March 16, 2021.

    Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. 꽁머니 홍보방

    on March 20, 2021.

    This is extremely fascinating substance! I have completely delighted in perusing your focuses and have reached the conclusion that you are right about a hefty portion of them. You are extraordinary. The Float Life

    on March 30, 2021.
    on April 3, 2021.

    This is my first time i visit here. I found such a substantial number of interesting stuff in your blog especially its examination. Really its inconceivable article. Keep it up. Computer Support and Services companies Cheviot Hills Los Angeles

    on April 5, 2021.
    I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post.안전놀이터
    on April 6, 2021.

    Wow, this is really interesting reading. I am glad I found this and got to read it. Great job on this content. I like it. dry eye treatment

    on May 12, 2021.
    Reply