Support Center Visit Demo License manager Buy @ envato

Training how to resize title on mobile

marco_mafmarco_maf
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

  • BryanBryan
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • marco_mafmarco_maf
    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
  • BryanBryan
    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.

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • marco_mafmarco_maf
    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/
  • marco_mafmarco_maf
    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?
  • marco_mafmarco_maf
    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
  • BryanBryan
    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;}
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • marco_mafmarco_maf
    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
  • BryanBryan
    You can use media queries to change it on mobile 
    @media (max-width:767px) {
    	.my-custom-h2 {font-size:40px !important;} 
    }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • marco_mafmarco_maf
    It works fine, thanks a lot!

Sign In or Register to comment.