Do you mean when a user is holding their phone on the side? If so, it’s simply a case of making sure the site looks good at that screen size, along with a range of other screen sizes. From say 320px right up to 2000px+. That’s the goal of making a site fully responsive.
There are many devices and orientations in play, so it’s best not to focus too heavily on the specific breakpoints (e.g 320, 480, 568, 768, 1024). But rather the full range of sizes in between. That’s why you can drag Microthemer’s top ruler left or right to easily see how the site looks at all sizes.
A landscape phone might be around 640px wide – just one screen size you want things to look good on, among many.
The text gets big on a landscape phone, simply because the vw unit becomes quite large on 640+ screen sizes, and you’ve set 8rem as the max value in the clamp function (the last value).
You could solve this by setting a lower max value e.g. 4rem and / or adding an extra font-size style rule via the Tablet and Phone tab in Microthemer, to make max-size a bit smaller.
Hey Stephen, I appreciate your support and suggestions. More videos explaining how to accomplish common CSS tasks is certainly on the todo list. I know that I could be doing a lot more in that domain, and having better docs would fit with my commit to deliver great customer service (as well as being a content marketing strategy).
It made sense to wait until version 7 is out, as the interface and workflow is being improved in this update. But I’m hoping to have the beta ready by the end of the month/early July. And the next step will be to release a series of new videos.
Thanks again for considering me.
Cheers,
Sebastian
P.S. I will add some integration with Bricks in future, similar to Elementor / Beaver Builder / Oxygen 🙂
