#How to change the default font size of Title based on screen size (mobile, tablet and desktop)?

2 messages · Page 1 of 1 (latest)

summer oasis
#

I have setup default font sizes from h1-h6 in the theme.ts, this works well for the desktop screen size, but it looks very big on the mobile screen. Is there a way to set font sizes based on screen size in the theme, so I don't need to update different font sizes in all Title component usages?. export const theme = createTheme({ /* Put your mantine theme override here */ headings: { sizes: { h1: { fontSize: rem(60) }, h2: { fontSize: rem(54) }, h3: { fontSize: rem(48) }, h4: { fontSize: rem(42) }, h5: { fontSize: rem(36) }, h6: { fontSize: rem(30) } }, }, });

sinful zephyr