[owenbParticipant]

Hello, I’m trying to use Responsive text for my section custom headlines on my homepage and speciality pages: owenbillcliffe.co.uk

Without RT, I’ve got them set to appear as H2 sized. This is fine for the regular browsers, but way too big on an iPhone screen. So, I tried to assign a Responsive Text class to them but the way it works isn’t clicking with me.

If I set a compression of 1.0 and don’t enter min and max text sizes the text on my desktop browser leaps up to 100px, way bigger than a normal H2 heading size! Why is this? I assumed that the compression would be relative to whatever the text had been set at in the design of the site, but instead it seems to over-ride that and apply 100px with 1.0 compression, 166.67px at 0.6 compression, etc.

Is the best way to use the RT classes to work out what an H2 heading text size is in the CSS of the site (for example, because I’m using H2 headings in my case), and then set that as the maximum size in the RT settings wherever I use them in order to keep the desktop looking the same? And then apply whatever compression ratio I need to get the iPhone size looking good?

[RupokMember]

Hi there,

Thanks for writing in! You can follow this to understand Responsive Text better as everything explained there. Click on individual stack to see the demo.

However you can also assign a class to a custom headline and control th font-size with media query :

.your-custom-headline {
  font-size : 72px;
}

/* For tablet */
@media only screen and (max-width: 979px) {
.your-custom-headline {
  font-size : 54px;
}
}

/* For mobile */
@media only screen and (max-width: 767px) {
.your-custom-headline {
  font-size : 36px;
}
}

Hope this helps.

Cheers!

[owenbParticipant]

Hi, sorry, did you mean to include a link there? “You can follow this”?

Also, the responsive text tool in Cornerstone doesn’t appear to be working *at all* now for my page here: http://owenbillcliffe.co.uk/event-photography/

I’ve set a responsive text class of ‘.page-h-responsive’ with 1.5 compression and max-size 36px and assigned it to my first headline on the page, and it ignores it completely.

[ChristopherModerator]

Hi there,

Please remove predot from headline class name, it should be page-h-responsive.

Thanks.

[Author]

Posts