I know you can do media queries in the css, but how do I specify that I need H3 in XL and H6 in XS using the PG UI?
Headings 1–6 are not actually about visual size, but hierarchy in the structure of the HTML and content flow.
Unless you are talking about this option here for heading size?
Many Bootstrap classes support responsive breakpoint variants, but some do not. If you want precise control over heading sizes at different breakpoints, you would typically either:
-
Create custom classes
-
Apply CSS to your heading elements using media queries, eg h3 tag or .h3 class making it smaller on the XS breakpoint.
The later, being the easier option for project wide.
Bootstrap classes in the Elements Property panel that support breakpoint variants have breakpoints showing.
1 Like
The other option you have is to set font size in relative units instead of pixels, such as vw. That makes the text scale to be a constant proportion of the display dimension. Not always the perfect option, but works well in many cases.
That’s where clamp comes in… min vw max
font-size: clamp(min, preferred, max);
Is there a PG UI way to clamp, or is this just CSS only?
Thanks to share i will figure it out more!