Member Avatar for Member #321605

Good evening

I'm trying to alter the size of font used in a template I purchased recently - the site is Wordpress based, so I'm not sure whether it functions in exactly the same way. I'm happy with the size of font for all other parts of the site, just the page titles are looking too big. The header code is:

<!-- Header -->
                    <div class="5grid-layout">
                        <div class="row">
                            <div class="12u">
                                <header id="page-header">
                                    <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="mobileUI-site-name"><?php bloginfo( 'name' ); ?></a></h1>
                                    <?php ax_menu(99); ?>
                                    <br />
                                </header>
                            </div>
                        </div>
                    </div>

I'm trying to edit the size of text that I believe the following code is referring to:

<h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="mobileUI-site-name"><?php bloginfo( 'name' ); ?></a></h1>

I've tried the following code, with no success, and hoped someone could point me in the right direction!

h1.12u {
    font-size: 1.15em;}

Any advice gratefully received.

  • 3 Contributors
  • 4 Replies
  • 212 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gabrielcastillo

Dani AI

Generated

Short, practical guidance to make the site title smaller without editing the PHP template.

Target the link that prints the site name (it already has a class), rather than trying to style the grid wrapper. Add a rule with enough specificity and use a fixed unit if you want exact control. Example:

header#page-header a.mobileUI-site-name {
  font-size: 20px;
  line-height: 1.05;
  display: inline-block;
}

Put that CSS into Appearance → Customize → Additional CSS (or a child theme stylesheet / a site‑specific CSS plugin). Do not edit the parent theme files directly so updates won’t overwrite your change.

If the change doesn’t appear, follow these checks (builds on @Member120589 and ’s tips):

  • Open browser DevTools, inspect the title element and look at the Computed/Styles panel to see which rule is winning and which file it comes from.
  • Clear caches: browser cache, any WP caching plugin, CDN (Cloudflare) and server caches; in DevTools enable “Disable cache” while testing.
  • If another rule has greater specificity or uses !important, either increase selector specificity (target the anchor as above) or use !important only as a last resort.
  • Look for theme typography settings (Customizer) or a plugin that injects CSS; some themes set base sizes with rem/em which affect h1 scaling—switch to px if you need fixed sizing.

If these steps still don’t work, note the exact CSS rule shown as active in DevTools (selector + file/line) and post that—knowing the overriding rule makes it straightforward to provide the minimal, correct selector.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

You've got the h1 and 12u the wrong way around:

.12u h1{
    ...
}
Member Avatar for Member #321605

Many thanks for the swift (and patient) reply.

Have made the change, but text size is still huge. I'm not sure if it's a further error on my part (on the code above) or whether it's an issue with my lack of understanding on Wordpress?

Member Avatar for Member #120589

Maybe...

#page-header h1{
    ...
}

If you have chrome, look in the dev tools and the elements / styles panel.

Member Avatar for gabrielcastillo

Try clearing your page cache.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.