Training how to resize title on mobile

Comments

• Bryan

  December 2017

  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_maf

  December 2017 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
  
• Bryan

  December 2017

  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_maf

  December 2017

  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_maf

  December 2017

  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_maf

  December 2017

  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
  
• Bryan

  December 2017

  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_maf

  December 2017

  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
  
• Bryan

  December 2017

  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_maf

  December 2017

  It works fine, thanks a lot!