[RodeBoy]

Hi guys, on harmonyhomeimprovements.co.uk the menu bar on mobiles – portrait view – is very deep. This is due principally to my customers name being so long, thus forcing the hamburger menu onto the next line, but I was wondering if you have recommendations to reduce the size please? Desktop and mobile landscape views are all fine.

I can obviously reduce the letters in the site title, but is that the only option?

Thanks, Chris

[Skandha]

@rodeboy: Hello Chris,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 625px) {
	.site-title {
		font-size: 18px;
	}
}
@media screen and (max-width: 515px) {
	.site-title {
		font-size: 15px;
	}
	.site-description {
		font-size: 11px;
	}
}

Let me know if this works out!
Kind Regards,
Skandha

[RodeBoy]

Perfect Skandha! Thank you

[Skandha]

@rodeboy: Glad I was able to help you out! Have a great weekend!

Kind Regards,
Skandha

[RodeBoy]

Sorry to open this one up again but for the same site the display on iPad in landscape mode takes it to a second line due to the customers long name. Could you please advise the CSS code to reduce the font size for these devices too please?

Many thanks,
Chris

[Skandha]

@rodeboy: Hello Chris,
Can you attach me a screenshot of how it is showing up on the device?

Kind Regards,
Skandha

[RodeBoy]

Hi Skandha. Sure, I have sent one through.

[Skandha]

@rodeboy: Hello Chris,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 1024px) {
	.site-title {
		font-size: 17px;
	}
	.site-description {
		font-size: 12px;
	}
}

Kind Regards,
Skandha

[RodeBoy]

Perfect Skandha. I have retained the previous CSS code to reduce the size for mobiles which I assume is correct.

Thanks,
Chris

[Skandha]

@rodeboy: Glad it worked out. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts