[coryyeakelParticipant]

I’m having a bit of trouble getting my font size smaller on Mobile. I’m setting everything up for my new site so there’s not much content, but you can see what I mean below.

On desktop, the site looks great (see screenshot here).

On mobile, the title is huge; text isn’t huge but definitely bigger than I’d like (see screenshot here).

What can I add in order to control the different text/font sizes on Mobile?

URL is: http://homegymr.com

Thanks!

Cory

[coryyeakelParticipant]

Anything guys?

[RadModerator]

Hi there,

Thanks for posting in.

You can use responsive text shortcode, like from here theme.co/x/demo/integrity/1/shortcodes/responsive-text/. But you need to set the selector for h1.h-landmark

Eg.

[responsive_text selector="h1.h-landmark" compression="1.5" min_size="36px" max_size="78px"]

If you’re on cornerstone, then you can simply go to settings section and add responsive text and set selector.

Hope this helps

[coryyeakelParticipant]

Thanks for the reply. Unfortunately I’m totally new to this, so I’m still learning how to use shortcodes altogether. I read the article you suggested which says to place the responsive shortcode after the line of text I want to apply it to, but if I’m trying to target the h1 page title, where would I put this shortcode then?

Also, I want the body text on the page to be responsive as well. Do I put a responsive shortcode after every paragraph..?

In essence, I want the entire page to be responsive accordingly. Titles, content, everything. Here’s the custom code I’m using now:

CSS:

h1.entry-title.h-landmark {
 font-size: 3.9em !important;
 font-weight: bold;
 text-align: center;
}

.entry-content {
font-size: 1.3em;
}

Javascript:

jQuery(".entry-title").addClass("h-landmark");
jQuery(".entry-title").wrapInner("<span></span>");

Sorry for being such a noob, lol.

Thanks in advance for the help.

[Rue NelModerator]

Hello There,

Thanks for the updates. You do not need to add the responsive shortcode after every element or paragraph. Simply edit your page in Cornerstone. You can easily apply the responsive text and manage it in Settings > Responsive Text.

You do not need a JS script either. When you are editing in Cornerstone, please turn on the advance controls and insert a custom h-resp class in the class field and you can then use it as your responsive text selector.

Hope this helps.

[Author]

Posts