Issues with font size

[jdfesta]

I’m suddenly getting errors in Google for my content that say “text too small to read” and “clickable elements too close together”

Screenshot attached.

I haven’t changed any of the settings, so don’t know why this happening now. How do I fix it?

This is the blog post these errors came up for is this one: https://nycphotojourneys.com/4-day-nyc-itinerary/

Side note: I just paid the additonal money to have access to direct support, but just searched for 20 solid minutes and cannot find how to actually email X Theme support. How do I do this? Or is this forum only available to paying clients? (I want to make sure I didn’t pay for something unecessary).

-Jessie

[charlie]

I’m guessing google has changed their mobile usability criteria. Do they tell you which elements are too small? I’d start with the docs here on how to change font sizes. We can go through getting us access to help you out if that helps. You are posting in the right spot. Thanks let us know if you have any questions. Have a great day!

Typography | Themeco Docs

[jdfesta]

@Charlie: Thanks - I saw that article before but I can’t seem to find the settings listed. When I go to “X” it just shows “Validation” and “Google Analytics” - screenshot attached.

I also went into Appearance -> Customize -> Customize X in Theme Options and found a Typography section that looks semi similar to what is in that doc, but instead of setting fonts it asks me to set breakpoints?

In terms of the clickable elements, it just gives me a general description of the issue: “Touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element.”

Standing by. Thank you!

-Jessie

[ruenel]

Hi Jessie,

It should be in Cornerstone > Theme Options > Typography if you are using the X theme 9.1.4 or Pro 5.1.5. In the latest version (X 10.0.1/ Pro 6.0.1), you will have to go to Cornerstone builder and find the Theme Options tab in the right side panel.

Hope this helps.

[jdfesta]

Yes, I saw that. But as I mentioned above, it says “Breakpoint” - is that just general font size? What does breakpoint mean?

Also, how do I fix the issue with the elements bring too close together?

Thank you.

[ruenel]

Hello @jdfesta,

The breakpoint means that the font size will change in a certain screen size. This is the responsive styling of the font size of the site. Kindly check this related articles to know more about breakpoints:

• https://theme.co/docs/responsive-styling#the-base-breakpoint
• https://theme.co/docs/hide-or-show-content-by-device-size#previewing-at-different-sizes

Which elements you would like to bring close together? You may want to adjust the padding or margins (top/bottom) of each elements.

Cheers.

[jdfesta]

Good morning. I read the docs, but I feel like having all of these options is making this way over my head. I have a few websites, and with my other themes you simply change the pixel size to change the font size.

With X, I’m confused as is root size, global size, and scaling size - and then the font sizes are listed in a variety of different formats. It looks like mobile is sometimes 20px, 480px, or 1 rem.

I’m still getting errors in Google Search Console saying my font size is too small on mobile, even though I have it listed as 20px breakpoint. Can you please tell me exactly where and how to adjust the mobile font size?

Also, for the elements, I mentioned in my initial message that Google didn’t tell me which elements are too close together. It just gives me a general description of the issue: “Touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element.”

Is there a specific place I can go to change the padding for touch elements?

Thank you.

-Jessie

[charlie]

Root font size is what you want to change. It’ll change the document default size for text based on the breakpoint widths.

Did the search console say that 20px is large enough? If I had to guess it’s the breadcrumbs that are giving you the issue as it’s the smallest text on that page in question. .x-breadcrumbs using that as a css selector you can up that font size. I can see about us adding controls for that.

I’m assuming you mean buttons for the second question. See the “Buttons” section in this same area in Cornerstone. There is a size section in that area. Their CSS class is usually x-btn or button . Have a great new year!

[jdfesta]

I see these sections, but I still am not seeing how to change them how you’re saying. Screenshots attached.

Re: Fonts. Which one is breadcrumbs? I just see XS Breakpoint, SM, MD, LG, XL, all set to 20px. Do you recommend XS be 30 and SM be 25, as in your screenshot?

Re: Buttons. I see the buttons section, but I don’t see anywhere to change the padding.

Awaiting your response.

-Jessie

[charlie]

There are no controls for that theme option currently. Using the following CSS in your global CSS section will get you there. Click the button like the screenshot to enter the editor.

.x-breadcrumbs {
  font-size: 12px;
}