Support » Theme: Apostrophe » Site Title Not Showing on Mobile Devices

  • Resolved scottrobg

    (@scottrobg)


    Hi, my site is funknstuff.net. Neither the site title, Funk N Stuff, nor the logo shows up on mobile devices. The tagline does show up.

    I was thinking it might be an issue with the title being white but the customizer only allows changing the tagline color and not the site title, so I can’t experiment. I spent hours looking for and trying CSS to change the title color but had not luck, and am a complete novice with CSS.

    So first, is the mobile issue due to the title color or something else?
    Second, if it is due to the site title color, how can I change it and what color do you suggest?

    Thank you so much!

    Scott

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @scottrobg!

    It looks like you have Jetpack’s Mobile Theme Module activated.

    You can turn that off (Apostrophe is mobile friendly on it’s own) under Jetpack > Settings > Appearance.

    If you’d prefer to keep that turned on, try adding the following to your site’s custom CSS:

    .mobile-theme #site-title a {
        color: #000;
    }

    You can replace #000 with your own HTML color code if needed 🙂

    The logo isn’t set to show up on the mobile theme though. You could try the Jetpack support forum for tips on that, unless you go with disabling the mobile theme and letting Apostrophe do it’s thing 🙂

    Awesome, what a simple fix to turn off that JetPack feature. Not sure how it got activated. I did discover while in the JetPack mobile setting that in Apostrophe the title and tagline color change together (even though it only shows the tagline changing in the preview window) and changing it to a color other than white allows it to show up on mobile devices. But white is the best color for my title and I also want the logo to show, so Apostrophe’s native mobile setting makes most sense.

    I am curious though if there is CSS that could be used to change the title color without affecting the tagline color and vice-versa. I would also like to try playing around with the fonts and sizes potentially. Can you recommend guidance for those things?

    Thanks again Chad (or other members of the community in advance).

    Interesting point on the color change not matching up in the Customizer. I’ll make sure that gets looked into 🙂

    In the meantime, here’s some CSS for the different elements:

    .site-title a {
    	color: #333
    }
    
    .site-title a:hover {
    	color: #ddd;
    }
    
    .site-description {
        color: #000;
    }

    That sets separate colors for the title, the title when it’s hovered over, and the tagline (in that order).

    You can add a font-size value to the first and/or third styles if you’d like:

    https://www.w3schools.com/cssref/pr_font_font-size.asp

    Excellent, thanks again!

    You’re welcome!

    Hi @scottrobg,

    We’ve tracked down the cause of this problem and have fixed it. Now when you change the header colour, both the site title and description will change, in the preview and on the actual site.

    An updated version of Apostrophe (v.1.0.13) should now be available with this fix.

    Thanks for reporting this issue! Just let us know if you run into anything else!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Site Title Not Showing on Mobile Devices’ is closed to new replies.