[MBParticipant]

Hi,

Curious if there’s a global setting to optimize text in column containers across our entire site.

The text is perfect on desktop and tablets, however in a small viewport like iPhone 5s, the containers make the columns too narrow and some lines only have 2 words on them.

We understand how responsive text works in cornerstone, but curious if there’s a way to optimize the text across the site for small viewports without redesigning each page and post.

Thanks, MB
https://mbguiding.ca/

[RupokMember]

Hi there,

Thanks for writing in! You can use media query to change any settings for specific screen size/range :

@media only screen and (max-width: 979px) {
   // write your CSS here
}

or

@media only screen and (min-width: 320px) and (max-width: 767px) {
   // write your CSS here
}

Hope this helps.

Cheers!

[MBParticipant]

Not having good luck with this. Any way to target all of the text, including headlines, across the entire site, so that it fits a narrow viewport nicer? Please look at text on a smaller viewport and advise. Thanks, MB

[RadModerator]

Hi there,

It’s not possible to target all texts especially if they are meant to have different sizes. The responsive text is done by javascript and should be manually applied for each target headline or text. While the same as CSS, it should be manually applied to each target text too.

But you can always force them like this which of course, may have unwanted effect.

@media only screen and (max-width: 979px) {
h1, h2, h3, h4, h5 {
font-size: 14px !important;
}
}

or

@media only screen and (max-width: 979px) {
h1 {
font-size: 16px !important;
}
h2 {
font-size: 14px !important;
}
h3 {
font-size: 12px !important;
}
h4 {
font-size: 11px !important;
}
h5 {
font-size: 10px !important;
}
}

But for the text, it depends on text container could be

@media only screen and (max-width: 979px) {
body {
font-size: 10px !important;
}
}

Thanks!

[Author]

Posts