Training how to resize title on mobile

edited December 2017 in Theme support
Hi, I'm using Training version of Be Theme.
The issue is the following, I like the default settings of your theme as you can see here http://themes.muffingroup.com/be/training/about/ but if you write a word just a bit longer than 4 letters or numbers (as e.g. "1290" in this case) it will result not visible on mobile devices.
How can I fix this problem?
Tx

Comments

  • Hi,

    please send us link to your own page, where you have this text longer and it does not appear on mobile, so we can take a closer look.
  • edited December 2017
    Hi,
    please go to website and click on the lock icon at the right, then insert as uid: guest and as pwd: guest
    Look at the home page, inscription is visible just partially on mobile.
    Thanks
  • This is becaus you are using a google font and you have declared a font size that is static and does not resize with the website.
    I have tested it and the best result would be something like this:

    <h2>[google_font font="Open Sans" size="" weight="400" italic="0" letter_spacing="" color="#626262" subset=""]Insert your content here[/google_font]</h2>

    You do not declare the font size inside the shortcode, but you choose a heading like H2 and change it size in theme options>fonts. You can choose a headling like h6 only for this purpuose.

  • Well, thanks. Ok, I'm going to try it.
    By the way this kind of formatting came from your Training BeTheme, please look at this: http://themes.muffingroup.com/be/training/about/
  • Maybe it could work.
    Actually there's a really strange feature that could be a bug. If I choose checking "900 Black" on fonts panel, all the website headings goes on Source sans pro black, instead Raleway. It's really strange, isn't it?
  • Now, getting back to the problem at hand, to do what you suggest with headings (h1,h2...,h6) directly from the control panel is not possible, because every single heading is used inside the theme.
    Do you have any other suggestion to fix the issue?
    Thanks
  • You can use any heading type and add a custom css class, like:
    <h2 class="my-custom-h2"></h2>
    And then add custom css:
    .my-custom-h2 {font-size:40px !important;} 
  • Ok, but I need that this class must be resized on mobile, otherwise I'm simply moving the issue from in-line formatting, to css,
    Thanks
  • You can use media queries to change it on mobile
    @media (max-width:767px) {
    .my-custom-h2 {font-size:40px !important;}
    }
  • It works fine, thanks a lot!

Sign In or Register to comment.