# What do I do in PG UI to make Heading Size change with screen size e.g. XS vs XL

**URL:** https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590
**Category:** Beginners
**Created:** [May 14, 2026, 6:38am UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590 "2026-05-14T06:38:39Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)
#### Post date: [May 14, 2026, 6:38am UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590/1 "2026-05-14T06:38:39Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7073_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)
#### Post date: [May 14, 2026, 7:18am UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590/2 "2026-05-14T07:18:10Z")

</div>

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?

 ![CleanShot 2026-05-14 at 19.10.11@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/941a28e0a67cab35e451203f7bbdeedce383eaf8.png)

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.

![CleanShot 2026-05-14 at 19.19.17@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/optimized/2X/9/96041b9337ad39b4167603ab04446d848bd573d9_2_517x33.png)

 ![CleanShot 2026-05-14 at 19.19.31@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e68b54cd2ed06d804abd0a245ad787febac50a99.png)

---

<div class="post-metadata">

### Author: ![reflex](https://avatars.discourse-cdn.com/v4/letter/r/f05b48/32.png) [@reflex](https://forum.pinegrow.com/u/reflex)
#### Post date: [May 20, 2026, 9:50am UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590/3 "2026-05-20T09:50:30Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7073_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)
#### Post date: [May 21, 2026, 2:15am UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590/4 "2026-05-21T02:15:33Z")

</div>

That’s where clamp comes in… min vw max

`font-size: clamp(min, preferred, max);`

---

<div class="post-metadata">

### Author: ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)
#### Post date: [May 21, 2026, 4:19pm UTC](https://forum.pinegrow.com/t/what-do-i-do-in-pg-ui-to-make-heading-size-change-with-screen-size-e-g-xs-vs-xl/11590/5 "2026-05-21T16:19:37Z")

</div>

Is there a PG UI way to clamp, or is this just CSS only?