Font Values Pagebuilder Pro And Helix
Siegfried Strassner
Hi, actually I am modifying the font size values for mobile view. I could set the diferent values for diferent media displays in Pagebuilder, e. g. in the Text Block addon. But choosing this way I have to modify seperately each existing text and page. Now I had the idea to set general values in Typography of Helix, without setting specific font size values in Pagebuilder. So I set the font values in Helix for diferent media displays. But handling this way, the font sizes in Pagebuilder pages do not change for mobile or tablet view. Is there no transfer of the diferent values in Helix to Pagebuilder? Or how can I manage this? Thank you for answer.
Paul Frankowski
Accepted AnswerHi Siegfried,
On your case, I would set font-size for mobile/tablet using custom CSS & Media Queries. For example (Mobile):
@media (max-width: 640px) {
body, p, li, span, strong, td {font-size: 16px;}
h1 {font-size: 36px;}
h2 {font-size: 33px;}
}and of course you can put there classes used by addons etc. and use @media for Tablet etc.
So all you would have in one file (place) = easy to manage. Many webmaster uses this method with success.
Siegfried Strassner
Accepted AnswerIf you think about it, the solution could be so easy ... Thank you!
Paul Frankowski
Accepted AnswerIt also allows you to remain consistent. So text and headers would have this same font size on every single subpage.
Siegfried Strassner
Accepted AnswerHi again, thank you for the code, I tried it. But unfortunately it dit not work, there is no effect on the font sizes used in pagebuilder, especially in the addon "text block". Neither if I clear the cache.
Then I tried to put diferent PB classed, but only I reached to chance the title-tag for media view with this code:
@media (max-width: 580px) { .sppb-section h2{ font-size: 26px; line-height: 35px; } }
Trying the same with p, body (and so on) failed, also there is no effect when I put different pagebuilder classes.
So, which class I have to put there, which code I need to change the size of the text in the text block?
Paul Frankowski
Accepted AnswerUseful guide: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
.sppb-addon-text-block .sppb-addon-content,
.sppb-addon-text-block p { }