Docs

[dogpile]

Hi,

is there a way to make the headlines in cornerstone responsive?

best regards!

[dogpile]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Yes you can use “Responsive Text” in Cornerstone – http://prntscr.com/ca5caq

Let’s add a selector there with minimum and maximum font-size – http://prntscr.com/ca5cgm

Then use the selector in Class field for your Custom Headlines – http://prntscr.com/ca5cq2

Hope this helps.

Cheers!

[dogpile]

Thanks for the Screenshots. I defined the rule attached to the screenshot and applied the class to the element, but it wont work. Anything wrong with the declaration? In theory it is supposed to work, right?

[dogpile]

Here’s the files:

[Lely]

Hi There,

Thank you for the screenshot. It’s not working because you have added dot (.) on the class field. On the class field just add h-unter without the dot.

Hope this helps.

[dogpile]

Works almost like a charm. But there are still some breakpoints that will disappear. Just look at the screenshot

[Joao]

Hi There,

Try decrease in a couple of pixels your minimal font size.

Let us know how it goes,

Joao

[dogpile]

Its not helping, imho it is not the minimal-viewports that cause trouble, its the areas in the middle..

[Rupok]

Hi there,

Thanks for writing back. It will be automatically adjusted based on your minimum and maximum font size along with the compression. If you still need to adjust the font-size for any specific screen range; you can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 800px) and (max-width: 1100px) {
.h-custom-headline.h-unter {
  font-size: 16px !important;
}
}

Hope this helps.

[dogpile]

It helped! Is it possible to declare this rule sidewide for all -say- h5-headlines to behave responsive? otherwise it would be a painful job to manually declare this for almost a hundred pages..

[Christopher]

Hi there,

Yes, it’s possible. Please update previous code to :

@media only screen and (min-width: 800px) and (max-width: 1100px) {
.h-custom-headline.h-unter,h5,.h5 {
  font-size: 16px !important;
}
}

Hope it helps.

[Author]

Posts