Font sizes and different break points

Maybe i’m a little confused on how this works.

I have set up my h1 so that it is 1em when I preview it at 1200px wide view.

Can i not then swap to 768px-979px preview view and change the font size to 1.2em and so automatically change the font size for that break point only.

However it doesn’t seem to work, whatever view I change in seems to change and affect all other views.

I understand i can use helper classes .resp-h but I thought i would be able to have more control of font sizes by directly designing in each view. Or am I wrong.

I also notice i don’t have the option to choose h1 or h2 or any other when I use the newer text element (not classic). I watched a video that seemed to suggest i would have that option. Is that because i haven’t upgraded to pro?

Is there a guide anywhere explaining the best way to handle typography and breakpoints (preferably using the latest methods)

Hi,

Thanks for writing in!

  1. Kindly note that em is a relative measurement. The size of an EM depends on its parent. If the text size of body is 16 pixels, 1.5 EM will be 24 pixels (1.5 * 16). Try to use px instead though I would recommend that you use responsive text rather than using css to specify for each screen width.
  1. The text element doesn’t have an option to change the heading tags. You may use the headline element instead.

Thanks

Hi i have added a responsive text section.

Then added the class to my headline element (Acupuncture, Chinese herbal remedies and massage for cats, dogs, rabbits, horses and any other pets, in your own home)

Formatted the text for the largest view

but my text still isn’t changing/responsive in other views. I must be missing something. I’m just trying to understand this, sorry

I did try adding class=“responsive-h” with a h1 tag to the headline text which sort of worked but i then i had no control over the initial text size

Hi There,

In that case, do not utilize the Responsive Text Settings. Responsive Text Settings is continuously reducing the font-size, so it can not accomplish what you’re after.

I would advise that you properly utilize the Theme Options > Typography > Root Font Size feature instead.


This will be your base font on specific screen-size (768px-979px is the FONT SIZE (MD)). This means that you can have a different font-size on different screen width. Use em unit to your element’s font-size so it will respond to the Root Font Size (see Paul’s explanation above)

Hope this shed some lights,
Cheers!

But it wasn’t reducing my font size!. if you look at the page i linked, the font size for the first heading is the same in every view. Even though i followed the instructions in the video paul posted.

the font size is set as as 40px on every device
div class=“e49-16 x-text h-responsive x-text-headline” style=“font-size: 40px;”

isn’t the size meant to change when I set the minimum and maximum font size of the responsive text? - shouldn’t that mean my heading font is 40px in the smaller views and 75px in the larger views when I added the class h-responsive to the header element?

all I’m trying to do, is have each column in the top section appear roughly equal in each view.

I must admit i thought the point of the editor was to enable different layouts at different sizes, maybe i’m expecting to much.

I really must be missing something with the layout views… I can’t even work out how to centre text in mobile view separately from range left/right text in desktop view here. http://acupet.flywheelsites.com/sample-page/

I think i missing a simple concept somewhere. do I need to add a completely new heading element in mobile view, or can i just edit the mobile view somehow.

Hi There,

The Responsive Text Settings on your page is not working because it’s actually targeting the wrong tag (not the actual h1 tag.), The text font-size in a Responsive Text is based on your settings (min-size, max-size, compression), but there is another variable here, the container of the text, which commonly would be the column. However, with V2 element this is not the case because of how V2 element is structure. This explanation alone sounds complicated, right? This is why we do not recommend using the Responsive Text Settings on V2 Text/headline element.

Here are the suggestion on how you can make theV2 Text/Headline responsive.

Now that I understand what you’re trying to do, yes you can continue using the Responsive Text Settings. The issue why the responsive text settings seem not affecting your Headline is because of the wrong selector, this selector .h-responsive only target the container of the text but not the actual text, please update your selector to this: .h-responsive .x-text-content-text-primary play with the min-size and max-size until you get the desired look.

You have set that text to be right aligned, the first option is to hide that text on mobile and replace it with the same text but align center using the Hide During Break feature.

Or you can add this following custom CSS to the Headline Element’s CSS area.


@media (max-width: 767px) {
	$el.x-text .x-text-content-text-primary {
		text-align: center;
	}
}

Hope it helps,
Cheers!

Ah thanks… I decided to ditch responsive text, and use the root font size - stepped version. The key for me was using rems/em’s for all sizes. Then it all started to work.

I wonder are there set of five specific break points, these would be handy to know i think @media (max-width: 767px) {

Hi There,

Glad to hear that, you can actually create your own breakpoints its up to you on what screen-width you want it to trigger, but the most common are:

@media (max-width: 979px) {
	/*tablet custom CSS here*/
}
@media (max-width: 767px) {
	/*mobile custom CSS here*/
}
@media (max-width: 480px) {
	/*small mobile custom CSS here*/
}

Cheers!