Support » Themes and Templates » why do my page titles change colour on smaller screen?

  • Resolved 5high


    I’ve just noticed that all my page and post titles and subtitles change colour when the browser is reduced to the smaller screen size. They’re usually red (for .entry-header .entry-title and.entry-content h3) but then they change to grey, and show that they’ve been changed to ‘body’ too.
    site is here:
    I realise it must be something to do with the mobile settings, but i can’t find where to change it in the Twenty Twelve theme (for my 2012 child theme).
    Any ideas? Or is this standard practice for mobile settings?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Actually friend it’s responsive site when you open the site in smaller screen then menu is going to under the drop down..

    Thanks for replying piyushp.esw, and yes i realise it’s due to being a responsive template. But I’m not referring to the menu – it’s the colour change of the page/post titles and sub-titles that I’m trying to fix. I can find what it becomes, via Firebug, but I can’t find the setting that causes this to change!

    Moderator stephencottontail


    In your style.css, on line 106 to 108, you have:

    .entry-header .entry-title, .entry-content h3 {
    	color: #bf0202;

    which is contained in a @media query that only applies if the window is at least 960 px (line 32 of style.css). When the window is smaller than 960 px, that rule doesn’t apply and so your titles become the default black color. So to fix it, move that rule out of the @media query.

    Thanks stephencottontail, that sounds really obvious when you say it! I guess I hadn’t fully understood how the @media query worked – I thought everything always applied to >960px, and only settings specified in the @media (smaller size) would change, when smaller. I’ll give it a go!

    Moderator stephencottontail


    I think you might be missing a bracket in your file somewhere. As you have it now, everything from line 32 to the end only applies if the window is larger than 960 pixels. When I looked at your style.css, I noticed some comments about how some things weren’t working correctly, which may be caused by the missing bracket. It looks like you have a custom theme, so I’d ask your designer for more help.

    Final update – all sorted by doing as suggested and moving the colour option out of the @ min 960 media query.

    Also checked through all my child style css, and added in the missing bracket at the end of the media query.

    So thank you for your help on this – much appreciated! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘why do my page titles change colour on smaller screen?’ is closed to new replies.