azuma – no mobile theme available?

[gmaster]

hi guys,

installed the latest WordPress version and activated azuma free template. everything works great except being on a mobile phone and looking at my website.

 

http://www.georgenecola.com

it doesn’t display the header correctly (no resizing) and the menu (bands, etc.) is not accessible at is hovering on the right side. I guess buying the template doesn’t solve my issue? except this issue I think it is a great template!

 

cheers

george

[Andy]

It is the long(ish) site title without any spaces that is the issue. It is not wrapping as it should and forcing the mobile menu icon off the right of the page.

If you use a logo image instead it will work correctly.

Of course we realise not everyone wants to use a logo and we are aware of this and will fix it in the next update.

[corchea]

Hi there

I do have a very similar issue on my site http://www.atlanticgenerationgap.com

‘Generation’ is too long for the mobile version and it splits into two lanes, which is terribly annoying. Changing the font size results in the title being too small for the desktop version.

I am going to try using an image instead, but it’ definitely not ideal!

It’s such a great template and such a shame this happens!

[Andy]

Hi @corchea

For your site I would recommend changing the Site Title font size back to the default 56px (it looks like you have increased it to 59px) and changing the Letter Spacing to 0 (zero) in Customize > Typography & Fonts > Site Title

Also add the following to Additional CSS to make the site title a bit smaller on mobile

@media only screen and (max-width: 768px) {
    .site-title {
        font-size: 42px;
    }
}

@media only screen and (max-width: 480px) {
    .site-title {
        font-size: 34px;
    }
}

[neha]

Hi Andy,

I am using the free Azuma template latest version. I should say, the template is really awesome. But when I am looking at my website on iphone, the header is not properly displayed. The logo is shown on first line, then menu icon on second, and (search,user,cart) on the next line. Also, the user icon is getting replaced by an arrow on mobile version.

On desktop, tablet and android phone, the header is displayed correctly(all in one line), but not on iphone. Could you please help me with this? Thanks

[Andy]

Hello @neha

On your iPhone, is the operating system iOS version 9 or less?
If so, that would explain the issue, as the CSS grid is only compatible with iOS version 10 and above.
You should be able to update your iPhone to iOS 12 or 13 for compatibility with modern CSS styling.

The user icon does display as an arrow when you view your site as a not logged in user. It is only the user icon when you are logged in to your site so you and your site’s customers can distinguish between signed in or out.

[neha]

Thanks Andy for the clarification.

[Author]

Posts