—
by
This tutorial shows you how to shrink your site title in your themes header using a tiny bit of jQuery.
It also provides a download of a modified version of the Genesis Sample child theme which includes the code already installed.
Here’s the screencast which shows you exactly what the code does.
Here’s the genesis child theme which already includes the code installed:
That was perfect! Thank you so much.
Brad,
Thanks for the tutorial. Do you know how to remove this script on a mobile device or certain media query ?
-Chris
You can wrap the CSS which starts on line 1217 in a media query so it doesn’t shrink when on smaller screens like this
[code]
@media only screen and (min-width: 1200px) {
//shrink CSS rules
}
[/code]
or you can modify the jQuery so it only adds the class on larger screen widths.
This code only executes when the screen width is less than 1023 pixels width.
[code]
if ($(window).width() < 1023 ) {
// Your code
}
Or you can change the comparison operator > to greater than a specific pixel width. This code only executes when the screen width is greater than 1023 pixels width.
if ($(window).width() > 1023 ) {
// Your code
}
[/code]
Let me know if you get stuck.
Also see here for a full solution https://wpsites.net/web-design/how-to-remove-jquery-script-on-a-mobile-device-or-specific-screen-width/
Was This Tutorial Helpful?