Training how to resize title on mobile

marco_maf

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

Bryan

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

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

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

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

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

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

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

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

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

It works fine, thanks a lot!