Text Not Condensing in Mobile Version

Hey @breecrowder!

CSS should actually be what makes the site responsive on smaller screens. On your site, the different breakpoints aren’t triggering for some reason.

First thoughts – try disabling the custom CSS you already have in place and go back to Pictorico’s basic styling, see if the text resizes. If so, then you’ll know you have a syntax error somewhere in your CSS that’s breaking something.

Another thing to check for is a plugin conflict. Temporarily disable all of your plugins and check the text on a mobile device. If it’s responsive, start turning your plugins back on one by one and retesting. When it breaks, you’ll know which plugin is triggering it!

Let me know what you find!

I have tried disabling all CSS and plugins, and the result does not change. You can see that here.

Ah, I see – you’ve hidden the theme’s title entirely, and this is an H1 in the body of the post.

To make that resize for different screens, you’ll need to add your own CSS breakpoints.

Here’s an example of one to make h1 tags smaller on screens that are narrower than 800px wide:

@media screen and (max-width: 800px) {
	h1 {
		font-size: 50px;
	}
}

Add that to the CSS plugin or child theme you’re currently using – you can tweak it as needed, or add additional breakpoints if you’d like.

Try that out, adjust the numbers a bit if needed and let me know how it goes!