Docs

[aaron_softwarepromotions]

Hello,

We have a font size problem on mobile devices.

It appears that the main headlines don’t seem to shrink down in size enough to fit on small screens.

I suspect that this is a CSS issue but I am not sure what I should change.

Can you please help?

This is an example URL, other URLs have this problem as well:

Search engine optimisation services

I attached a screenshot of what that looks like on mobile.

Thanks and I look forward to your reply.

Aaron

[Rupok]

Hi Aaron,

It seems you are using Responsive Text but you might need to use smaller font-size as minimum font size. Also check the compression you have set. If you have larger minimum and maximum font-size then it might not work properly.

Thanks!

[aaron_softwarepromotions]

I don’t know what you mean. Can you tell me what I need to fix?

[Joao]

Hi There,

Thanks for writing in!

If use “Responsive Text” in Cornerstone – http://prntscr.com/ca5caq

Let’s add a selector there with minimum and maximum font-size – http://prntscr.com/ca5cgm

Then use the selector in Class field for your Custom Headlines – http://prntscr.com/ca5cq2

Hope this helps.

Cheers!

[aaron_softwarepromotions]

I think that I’m already doing that.

Can you please review the attached screenshots?

Thanks

Aaron

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[aaron_softwarepromotions]

This reply has been marked as private.

[Friech]

Hi Aaron,

It seems the Responsive Text settings on your live site is working now.

Anyways, I did check your staging site to see what went wrong. I see that the class hero-heading-top is overwriting the responsive text settings.

.hero-heading-top {
    margin-top: 7%;
    font-size: 420% !important;
}

By default the responsive text settings should take precedent over class, but in this case since the font-size on the class hero-heading-top is declared !important it is overwriting the responsive text settings.

Hope this shed some lights.

Cheers!

[aaron_softwarepromotions]

I have since commented out the font-size: 420% !important;

Do you think I should also remove the margin-top: 7%;

Also, can you explain the responsive text settings: selector, compression, minimum size and maximum size

What do each of them mean?

Thanks and I look forward to your reply.

Aaron

[Jade]

Hi Aaron,

Removing the top margin value for hero-heading-top isn’t necessary.

As for the Responsive Text options, you can see the options description here http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps.

[Author]

Posts