To make my website more responsive for screens above 1920px width, I’m using calc to scale the body font-size fluidly. I also use em values where possible, so everything else scales with it. But at some point, my inside container width is not sufficiently large to fit everything inside, which causes clipping and other issues. Is there a solution to this? I was hoping to use an rem or em value for the inside containers as well, but that doesn’t seem possible.
I tried using calc to scale the max-width of the gb-inside-container class, but that makes all my containers the same relative width, while I have some at 800px, some at 1000px, and some at 1200px. If they’re all the same width, the visual hierarchy is just not what I want it to be.
I also tried adding a custom class to the containers, but those don’t apply to the inside container. So I’m out of ideas at the moment.
I am not sure i can get my head around the requirements to provide a ‘responsive’ solution.
Maybe using the CSS Clamp property for your font-size would be a better method as that would allow you to limit the maximum font size: