Docs

[adamcollins]

The website is http://www.mvmtcapital.com

I have constantly had problems with header sizing, on both desktop and mobile. For desktop, my issue is that during an initial page load the headers would load a small size and then suddenly “jump” to a larger size. So I added the following custom CSS to mitigate that:

h2{
font-size: 44px !important;
}

Now I’ve got a problem. These heads are obviously too large for mobile. I’ve experimented around with removing the important declaration and changing the responsive size of the h2 headers, but for some reason the headers on mobile never seem to shrink in text size.

Any help would be much appreciated!

[Rue Nel]

Hello There,

Thanks for writing in! It seems that each of your custom headline is already using responsive text. For more information about responsive text, please check it here: https://community.theme.co/kb/shortcode-walkthrough-responsive-text/

Because you have add the the custom css, the responsive text were overridden. To allow responsive text to work on smaller device, you must revise your custom css and use this instead:

@media (min-980px) {
  h2{
    font-size: 44px !important;
  }
}

Hope this helps. Kindly let us know.

[adamcollins]

Still encountering the same problem. I’ve removed the bit I had in Cornerstone’s Custom CSS and added what you included in Customizer’s Custom CSS. Any idea?

[Lely]

Hi There,

Please update above suggested CSS to this:

@media (min-width: 980px){
  h2{
    font-size: 44px !important;
  }
}

Hope this helps.

[Author]

Posts