Headings Split into New Lines on Mobile

Hi Mika-

Thanks for reaching out, and thanks for using the Crio Pro theme for WordPress. We really appreciate the feedback.

I’ll try to address each of your concerns.

[…] on the homepage, Firearms & Safety is cut up into strange pieces […] My preferred option would be to size down the titles for mobile so that it fits properly

Checking out your site, it looks like the headings start to wrap mid-word on screen sizes less than 360 pixels wide. Very few devices on the market right now have screens that small, but one major example is the iPhone 5, which is 320 pixels wide.

Here’s a solution that should work for you. Navigate to Customize > CSS/JS Editor and paste this rule into your CSS Code:

@media only screen and (max-width: 359px) {
h1, h2, {
font-size: 12vw !important;
}
}

These rules use the vw unit, rather than pixels, which stands for “view-width.” That means that on very small devices the font size will adjust according to the size of the device, and should work well for a variety of sizes. Very long words may still wrap, so you can adjust the value for h1 and h2 to a number lower than 12 if you need to.

Our developers are currently working on a more automatic solution for scaling down font sizes for small devices.

[…] it gives me no options to customize according to device.

You can customize per-device rules for your header and footer, but you’re right that right now, we don’t have typography options on a per-device basis. For example, I recommend adjusting your header design for mobile devices, so that your site title doesn’t wrap.

Navigate to Customize > Design > Header > Layout and switch to the phone view. You’ll see that your Branding row is currently set to 9/12 width. If you adjust that to 12, your site title won’t wrap.

I can select which device view. Except that device view is not consistent with what I am seeing on my end.

Other than the headings wrapping, are there other aspects of the mobile view that aren’t matching up? May I ask what device you’re using so we can make sure it’s working as expected?