- This topic has 3 replies, 3 voices, and was last updated 4 years, 10 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
I've created <H1> and <H3> header text in my Front Page 1, using a child theme based off Infinity Pro. It fills the page wonderfully on my 13" laptop and smaller screens, however in larger desktop screens it looks lost in space (especially on a 27" screen).
Currently the css is set at 48px and 36px, respectively. When I increase the size to fit on a desktop, it's too large for small screens.
Any suggestions for sizing my settings to adjust proportionately?https://adunate.com/
You have multiple routes you can go. Rather than explain it all here, I'll simply link you to a few sources. The short answer, use media queries to target specific screen sizes, or use more flexible units (not pixels) and the calc function (don't be intimidated). For further reading, Google "responsive text".
Thanks @Porter for your good suggestions. One question: My theme uses both px and rem to define font size. Does this allow for responsiveness?
Using px and rem is a way to support cross-browser compatibility. Rem is a modern standard. Some old browsers can't translate rem units so the px units are supplied as a fall back.
© 2023 WPEngine, Inc.