H1, H2 text reduced in size on mobile view

Store Design
1

Can H1, H2 or any other text be reduced in size when in mobile view.

Example: On desktop a H1 class might be in 1.6rem or 16 px etc, when in mobile view the text is reduced to 1.4rem etc.

Is this possible please?

2

Hi @iwonder ,

This is easily achieve using clamp. By the way, check on your theme, but mostly 1rem is equal to 16px. You can check the MDN Documentation about clamp here.

.h1 {
font-size: clamp(1.4rem, 2vw, 1.6rem);
}
3

Yes, of course it is possible. in
order to change anything for mobile devices, you need to add in the theme.css file :

@media screen and (max-width: 641px) {
  .h1 {
  font-size: 2rem;
  }
  .h2 {
  font-size: 1rem;
  }
}