Subtitle Font Resize for Mobile / Disable for Mobile?

Hi there… I’m glad you like it. I will try to remember to update the tested WordPress version in the readme. But if it works there’s nothing else to really update.

The plugin doesn’t handle any styles… that’s all left to you. If you want to serve different styles to different devices you need to write what’s called a CSS media query.

As an example, the following sets the subtitle class size to .75rem. But then any device wider than 300px (so everything but mobile) will have a size of 1.5rem.

.subtitle {
	font-size: .75rem;
}

@media (min-width: 300px) {
	.subtitle {
		font-size: 1.5rem;
	}
}
  

You should be able to get pretty custom this way. You can read more about media queries in the documentation.

Well now you got me thinking…. so today I built a subtitle block. It should be fairly handy in the Site Editor. If you have time to test it out I would appreciate it: https://github.com/helgatheviking/KIA-Subtitle/releases/tag/4.0.0-beta.1

Hey Helga! Long time, thanks for keeping the support as usual. I feel this plugin should have a update / least show tested with latest wordpress as it currently says on the wordpress repository its untested, and that puts people off from using it, although we both know it works great without issues.

thanks for the code, I will test it out by next week and report back. Maybe adding a few settings on the admin side wont be bad really. Just an idea.

The tested version will get bumped when the new release is shipped. Just ironing out a little additional documentation to explain how best to use it in the Site Editor. I actually find the block sorta confusing in the Post Editor.. but feel the same about the WordPress core Post Title block.

What kinda settings would you want to see added? I was thinking one setting might be to auto display… it’s not ideal for HTML markup but you can filter in the subtitle value automatically into the post_title filter.

Hey Helga, Just tried the updated beta version, dont see any issues, did you already add the ability to edit the size / mobile etc functions from the site customizer by chance? If not that would be the best thing to add feature wise, this thing otherwise is perfect. I know you may not like it, however that really would make this complete. ??

Settings wise,

• simply the ability to chose the subtitle size in mobile and tablets.
• padding/alignment (same as above).
• Ability to determine the size on the woocommerce archive page and size on the products itself.
• more important, so that it does not overlap on screens and can have a page break

And if you really want to go fancy maybe the option to add colours (I dont need that but hey there are those who do?)

• This reply was modified 7 months, 3 weeks ago by MisterH.

PS: I just tried the media css, it still will make it overlap instead of either going to the next line if on a mobile.

did you already add the ability to edit the size / mobile etc functions from the site customizer by chance?

As mentioned in our other thread, I don’t have any customizer settings.

I appreciate the feedback… even though this plugin is trying to be the opposite of fancy. ??

you should get some of that style stuff for free via the site editor… if you insert the subtitle block into your full site compatible theme’s template. (at least that’s what I am hoping for but don’t know if that works yet in nested/inner blocks)

Though I don’t think the block editor has mobile-specific style rules as options for blocks yet.

I don’t really know what it’s overlapping with? You’d need to provide a URL I could look at, but it’s surely a CSS issue.

Superb, Well I am using Oceanwp. Do you have anywhere I can read up on how to insert the subtitle block into the themes template or such?

Hmm, I am able to edit the mobile specific style rules from the customizer, I think its been there as a option for a while now, but maybe we are talking about 2 different things.

Would there still be anyway to make the subtitle collapse when on mobile, as the code you gave was not working.

Thanks for your time and all efforts, really helps a lot of folks with these little things. ??

• This reply was modified 7 months, 3 weeks ago by MisterH.

Here is a link, you can see, when you view it on a small screen, the subtitles (if long) will overlap onitself.

https://tinyurl.com/5n9x83my

I’m only just getting started with site editing templates and such myself. But I noted my basic procedure in the https://www.ads-software.com/plugins/kia-subtitle docs under “Site Editor”.

Definitely checkout Screenshot 2: https://ps.w.org/kia-subtitle/assets/screenshot-2.png?rev=3065685

As far as your overlap, I’m 90% certain it’s the 1px line-height you have set on .woocommerce ul.products li.product .woo-entry-inner h4.subtitle,?.woocommerce ul.products li.product .woo-entry-inner li.title?

And just for cleaner markup, I might suggest you put the subtitle inside the <li class="title"><h2>Some title</h2><h4 class="subtitle">A little subtitle</h4></li>

Then you could style them as

.title h2 { color: red; }
.title .subtitle { color: blue; }

Wow, perfect. Thanks Helga. That would serve me very well. And you can be 100% sure now, the 1px line height was causing the issue. I removed the line height and voila! Have a great weekend and thanks again! ??

If you are liking the plugin, please consider leaving a review https://www.ads-software.com/support/plugin/kia-subtitle/reviews/

enjoy your weekend as well!