[Resolved] I've broken the mobile functionality

[Alice]

Hi. Testing site on my chrome phone and (eek) it does not load. Have I left some messy code somewhere? Where should I look for faults?

http://www.ursulaholdengill.com

[Tom]

Hi there,

Your site doesn’t seem to be loading for me at all.

Your best bet is to call your hosting and get them to take a look – they should be able to tell you if it’s a coding error somewhere or if it’s something wrong with their server.

Let me know 🙂

[Alice]

Yes, the server was down. Phew!

Any tips on improving the mobile look? My site title is HUUUUGE on mobile, but hidden on desktop. My H2 is miniature.

I tried both

.main-title {
    font-size: 0.2em
}

and

.site-title {
    font-size: 0.1em
}

but it’s still a bit loud.

[bdbrown]

Hi Alice. The site title is an ID instead of a class. Try this css:

#site-title a {
    font-size: 1em;
}

[Tom]

I’m not seeing a site title on desktop or mobile?

[bdbrown]

Something strange going on for sure. It doesn’t show up in desktop view or if you resize the browser window. However, if you use Developer Tools and set the device mode, select a device and reload the site, the site title <h1> is visible and the site description is changed to an <h2>. Also, the header ID changes and the inside-header element is missing. Maybe a conflict with Jetpack mobile?

[Tom]

Oh yea, looks like the Mobile Theme from Jetpack is enabled.

Go to “Jetpack > Settings” and deactivate the “Mobile Theme” module.

That should fix this 🙂

Thanks for the tip, bdbrown!

[Alice]

Sorry for delay, I’ve been away from any internet (bizarre long weekend of no connectivity).
Thank you, both jetpack and add ‘a’ to site title code work well for me.
The disable mobile on jetpack means my style.css happens on all screens now.

[Tom]

Glad it’s all working now 🙂

[Author]

Posts