Make everything bigger
Answered
Scissor-tailed Flycatcher posted this in #help-forum
Scissor-tailed FlycatcherOP
Simple question. How can I make everything in the site a little bit bigger? Thanks in advance.
Answered by Western paper wasp
try increase the base font size (rem), not
Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
transform: scale(...), it breaks layout, clicks and positioning.Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
8 Replies
change scale of everything
could be done with
*{} in cssScissor-tailed FlycatcherOP
Thank you!
Western paper wasp
try increase the base font size (rem), not
Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
transform: scale(...), it breaks layout, clicks and positioning.Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Answer
@Western paper wasp try increase the base font size (rem), not `transform: scale(...)`, it breaks layout, clicks and positioning.
Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Scissor-tailed FlycatcherOP
Is it possible with Tailwind?
What can I use?
@Western paper wasp try increase the base font size (rem), not `transform: scale(...)`, it breaks layout, clicks and positioning.
Documentation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Scissor-tailed FlycatcherOP
This works with Shadcn, right?
Western paper wasp
Yes. Tailwind config:
theme: {
fontSize: {
base: '18px',
},
}
You can also scale via
shadcn:
Yes, it works without any issues, because shadcn/ui also uses
theme: {
fontSize: {
base: '18px',
},
}
You can also scale via
rem, Tailwind is based on them by defaultshadcn:
Yes, it works without any issues, because shadcn/ui also uses
rem and Tailwind tokens.