Problems with responsive text settings

I’ve been struggling with responsive text on campengroup.com. My client wants the green and white overlaid text over the banner image to get smaller on small screens so that it does not overlap her face and body so much. I’ve read the documentation on setting up responsive text and watched a few videos and things, but no matter what I try I can get the expected behavior. I must be missing something. I have set the root font size to “stepped.” Even though I’ve set my .h1-responsive max font size, it is still rendering 4x larger than what that max is set at. Can you recommend settings that will work better for this application?

I’ve attached a rendering that shows what the client wants it to look like.

Hi Casey,

Thank you for writing in, I see that you’re wrapping your text in a headline tag. This is also the reason why your responsive text selector seems to not affect the headlines.

<h1><span style="color: #cde13e; font-weight: bold;">Campen Group</span></h1>

and

<h3>Training &amp; Coaching Solutions</h3>

Please use the headline element instead if you need it to be a headline. Those headline tags have font-size associated to it (h1 = 400%, h3 = 228.5%) those amplify the test font.

Regarding the Root Font Size, it seems to be set to 14px on all screens? Please set a smaller value for font size (XS) and font size (SM).



Hope it helps,
Cheers!

Thanks so much for the help with this, Friech. Understanding the various settings here and how they interact has been a challenge. I finally made some progress, though, based on your input, but have encountered a new problem with the font faces in Heading elements: I set my headings font to Raleway, but something is overriding that with “font-family: inherit” and turning it into the body font, Merriweather. I’ve played around with turning the font manager on and off and adjusting theme options, but I can’t overcome this one with out applying element css. Interestingly, when I try to apply “font-weight: $$$;” in the element css, that’s ignored while font-family is not.

Hello Casey,

Did you enable the font manager? Please make sure that you have assign “Raleway” to you headings in X/Pro > Theme Options > Typography > Headings. And if you are using the headline element, please be advised that it has it’s own default settings. You will need to set the font for the headline element as well.

Would you mind providing us access to your site so that we can check your Typography settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Ah, I didn’t realize that the Headline element wasn’t inheriting those styles and, rather, had its own.

I’ve got the right fonts assigned now. ( I did it using the WSIWG text editor and assigning H1 and H3, is that right?). However, there is now some odd margin/padding on the left of H1 and H3 in the live version of the site that doesn’t appear when editing it in cornerstone.

I created an account for you at campengroupinc.com. Any help would be greatly appreciated!

Username: Themeco
Email: support@theme.co
Pass: (see below)

Hi Casey,

Thank you for the credentials, you’re on the right path, I’ve enabled the Advance Mode on your site to have all the settings available on the elements. You can now set the headlines to have the Raleway font. Please do not format your content using the WYSIWYG it will cause a conflict on the element configuration.

You can then set your styled element as a preset, then apply that preset to other (same) element, this will save you time repeating to style same elements.



Template Manager

Hope it helps,
Cheers!

I’ve also took care of the original issue which text cross on the background-image, that issue was not all about font-size but the width of the columns in mobile has a big part of that issue.

I’ve added that custom CSS below to the Page > CSS to reduce the section 1’s column to half.

@media (max-width: 767px) {
	#x-section-1 .x-column.x-1-2 {
    	width: 48%;
	}
}

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.