Typography Mobile
Robert
Hi, it looks like when you use typo presets, lets say H3>2rem for desktop and you set H3> 1.75 rem for mobile view then also destop goes to the mobile setting. And vice versa. In other words, the last preset you select stands. Is there somthing I miss? Local build.
Atick Eashrak Shuvo
Accepted AnswerHello Robert,
Sorry for the inconvenience you're experiencing. Please note that it's not possible to assign different typography presets (e.g., different tag sizes or values) to the same element across different screen sizes. The last selected preset will override any previous selections.
However, you can adjust the Font Size, Line Height, and Letter Spacing independently for different display sizes.
Hope this helps!
Best regards
Robert
Accepted AnswerI see, so we can use one preset (desktop) and for tablet and mobile goes the old way. Not possible to develop it the way the selected preset is assigned to different views? This way it makes more sense to use some css like below instead of using the typo-presets in SPPB, correct?
/* Base (desktop) */
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 { font-size: 3rem; line-height: 1.1; }
h2 { font-size: 2.5rem; line-height: 1.2; }
h3 { font-size: 2rem; line-height: 1.25; }
h4 { font-size: 1.75rem; line-height: 1.3; }
h5 { font-size: 1.5rem; line-height: 1.4; }
h6 { font-size: 1.25rem; line-height: 1.4; }
/* Mobile view */
@media (max-width: 768px) {
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
}Atick Eashrak Shuvo
Accepted AnswerYou can actually define different typography settings for each display size directly within the Typography Preset settings in SP Page Builder.
Robert
Accepted AnswerSorry but now I lost it, we can define different font size settings in pagebuiler for different views but only the last one selected will be used?
That is also what happens now, when I select a preset for desktop then in mobile view I have to assign the size for mobile manually.
Picking the mobile preset last, desktop view shows the mobile size. like what I said. Your last reply says it can be defined. Maybe its the langauge barrier but I dont quite understand what you mean now.
Atick Eashrak Shuvo
Accepted AnswerHello Robert,
Sorry for the inconvenience you're experiencing. Just to clarify, if you're using template typography settings and then modify the typography settings for any element within SP Page Builder, the SP Page Builder settings will override the template's typography settings. I'm referring to the SP Page Builder typography settings for different display sizes, as shown here: prnt.sc/iLTNdhtt2eSE.
Hope this helps!
Best regards
Robert
Accepted AnswerI don't use Helix font settings, only SPPB
Atick Eashrak Shuvo
Accepted AnswerHello Robert,
Sorry for the inconvenience. I understand the confusion regarding the H3 tag. To clarify, SP Page Builder doesn't have a specific option to set typography for individual HTML tags like H3. The H3 you're seeing is simply the name of the preset being used.
Best regards