Text too big on mobile

Hi Vlad,

Can you take a look at this page from a mobile device: http://www.stilehomes.net/we-do-it-with-stile/our-signature-homes/

Do you see that since the text size is large and the word signature is so long that its making it difficult to read. I had to use the visual editor widget in with a gallery widget to get the feel I was going for. I would have liked to use “projects” but it wasn’t coming out right no matter how I tried to make it work.

I’m expecting to have the same problem with the other sub pages under “we do it with stile” since I expect I’ll have to use the visual editor again to get the aesthetic I’m looking for. Is there some type of html code I can either put in the visual editor widget around the words in question (similar to adding a hyperlink which I’ve had some success with - like how), or possibly some custom CSS that will adjust all text to screen size?

Also, one other question, I’ve now used a few pieces of custom CSS, when you update Moesia will I lose those items. I’ve seen a lot of talk about these child themes which I’m totally worried about trying since I’m pretty close to having my site operational and really don’t want to muddy the waters.

Thanks for your help!

Hey,

Yeah, there is something I failed to correct yet regarding the widget title. The code is there, but I forgot to remove something. So please go to style.css, look for 56px !important; and remove !important. This way the widget titles will become 36px on mobiles instead of 56px.

Yeap, you’ll lose all modifications. If you don’t want to use a child theme you can use a custom CSS plugin. My suggestion is to install one of these plugins and add your customizations while you still remember what customizations you did.

Thanks again Vlad. I do have a CSS plugin that seems to be doing the trick. “Simple Custom CSS” - is what I’ve used for your previous suggestions to my questions. I noticed an update to Moesia today, can you just clarify the things that I will lose from my website if I update. The only changes I’ve made to “editor” were what you just suggested. Everything else I used was a Custom CSS input. I’ve added a couple hyperlinks using href codes within the text of a couple services - but that’s it.

Also, regarding your above fix, I found and removed the code you mentioned. The only thing is that the word signature is still too long when viewing on an iPhone. I can change the word, since I’m not 100% committed to it. But if I wanted this service’s title to show correctly without compromising the rest of the general aesthetic of the site, how would I do that?

Thanks.

Well, you’ll lose anything you’ve changed from Appearance > Editor.

You can make the titles even smaller on mobiles by adding this and adjusting as needed:


@media (max-width: 499px) {
	section .widget-title,
	.panel.widget .widget-title {
		font-size: 36px !important;
	}
}

Cool! Thank you, now I know what to prepare for.

Cheers.
A

Hi, my text is also too big on mobile, How can I re-size H1 for mobile?

Thank you

Hi,

You can resize h1 on mobile with this Custom CSS:

@media (max-width: 700px) {
h1 {
    font-size: 26px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba