Inconsistent uppercase

Are you able to provide a screenshot of the upper/title case issues you’re seeing? Not able to replicate in the browser resizing the window or on my iPhone when visiting the site.

Additionally, as far as the line break, are you just wanting to ensure that ‘Content &’ and ‘UX Design’ always remain on 2 lines? I don’t know of a way to get line break in the site title but some CSS could be used to ensure that that element stays only at a certain width to ensure the text doesn’t end up on one line.

Hi there, thanks for getting back to me.

Certainly. It’s on a Samsung J3 phone (ie Android). Sometimes it is uppercase, sometimes lowercase. On the desktop it’s all uppercase – including the portfolio project titles. I have the same problem on the Samsung tablet.

https://photos.app.goo.gl/zxC9vZHVHSgycPZA8
https://photos.app.goo.gl/HXnhRMYNMfVa9UoU9
https://photos.app.goo.gl/ZH8DSGWoECoGEPj4A

I tried to force it to be uppercase by adding additional CSS, but it only seems to work sporadically.

body * { font-family: Nunito, regular;color: #474747;}
h1 * { font-family: Nunito, regular;color: #474747; text-transform: uppercase;}
.wpcf7 input[type=”submit”] {
background: #f3725b; color: #FFF;}
h2 * { font-family: Nunito, regular;color: #474747;text-transform: uppercase;}
h3 * { font-family: Nunito, regular;color: #474747;text-transform: uppercase;}
h4 * { font-family: Nunito, regular;color: #474747;text-transform: uppercase;}
h5 * { font-family: Nunito, regular;color: #474747;text-transform: uppercase;}
h6 * { font-family: Nunito, regular;color: #474747;text-transform: uppercase;}

I don’t suppose you could tell me what the css would be for the site title please? I’m not good with coding ?? I’m more about the structure, words and imagery.

Hi there,

text-transform: uppercase is a base heading style for this theme – it’s applied to all headings in the theme’s style.css file, and is not removed later on in that file. On the theme’s demo site on WordPress.com, as well as on my own self-hosted installation, I see all headings in uppercase no matter what the screen size, as that CSS rule is being applied everywhere.

But if I view your projects in the browser inspector, I don’t see that CSS rule when I look at your headings in the mobile view, which tells me something on your site is removing or overriding the theme’s default styling.

Please remove all additional CSS you have added, and disable all plugins on your site except for Jetpack, and check if the inconsistent heading text is resolved. If that fixes it, it means either your CSS or a plugin is causing this, so in that case reactivate your plugins one at a time, and add back your CSS one declaration at a time, until the headings start showing in title case again. Whatever you added back just before it breaks is what’s causing this.

I tried to force it to be uppercase by adding additional CSS, but it only seems to work sporadically.

If this is being caused by a plugin that only loads its CSS after the additional CSS in the Customizer is loaded, the CSS coming from the plugin will take priority. That might explain why your custom CSS is not working consistently.

Also, I would like Content and UX Design to have a line break after the ampersand (&). How would I do this please?

This CSS should do the trick:

/*
Forces site title to break after the ampersand
*/
@media screen and (min-width: 35em) {
    .has-site-logo .site-title {
    max-width: 50%;
  }
}