Voyager Pro theme not responsive

That’s exactly what I see, but on an iPhone 6 the title disappears to the right and the nav overlay can be scrolled a long way left and right so much so that it’s hard to get back to any of the menu. It oddly is worse if I open the nav overlay from my blog page.

Thank you Adam @elixir. I will send what I can tomorrow as I’m out shooting a wedding today. I can send a few iPhone 6 screen shots now though.

You’ll need to send it using something like Dropbox. 400mb is far too much for an email unfortunately.

@ChrisL So I got your project file today and started to take a look. I didn’t get too far before I found some serious problems with a bit of code you’ve added to the Header section on your pages. The code in question is here: http://d.pr/i/5j5y

You’re inserting a BODY and HTML tag inside of your HEAD tag. This is pretty bad. The normal structure for a page looks like this:

<html>

  <head>
    HTML HEADER CONTENT HERE
  </head>

  <body>
    YOUR BODY CONTENT HERE
  </body>
</html>

What your added code is doing, generally, is this:

<html>

  <head>
    HTML HEADER CONTENT HERE
    <body>
    <html>
  </head>

  <body>
    YOUR BODY CONTENT HERE
  </body>
</html>

This is likely causing a lot of problems. I haven’t combed through every line of every page yet to see if there’s anything else amiss with your content or added code. I would recommend removing the code I pointed out and see if that doesn’t solve your problems.

As an aside since you have added meta tags in the Header, too – you can insert those using the Tags section in RW 7 to help you out and keep things organized and all in one place. I think @bon has a video on using that feature of RW in his tutorials on the RapidWeaver Community site.

1 Like

Hi Adam @Elixir thank you so much for looking at the project file. I’ve made the changes you pointed out and suddenly the responsiveness has returned and the banners are working roughly as I hoped they would - such a small error to make such a big difference. The nav overlay is still a bit weird and overly magnified, but no longer scrolls left and right thankfully; and the page title interferes with the menu toggle on some pages on some devices. Over all though I am now happy with the theme.

Thanks

Chris

We do indeed have a video about adding meta tags: http://rapidweavercommunity.com/tutorials/series/advanced-topics/episode/adding-meta-tags

1 Like

such a small error to make such a big difference

Yeah, little typos can mean a lot. That being said, those are two tags that form the foundation of a web page, so even though they look benign, they’re very powerful tags, and their misplacement definitely can cause problems.

The nav overlay is still a bit weird and overly magnified

Can you send me a screenshot? When I visit your test URL on my mobile device (iPhone 6+) and open the navigation, this is what I see, which is how it is designed to look: iPhone image on 2016-05-31 at 09:05:14.png - Droplr

If you’re seeing something different, let me know so I can have a look.

the page title interferes with the menu toggle on some pages on some devices

I believe this is due to the site title being too long for the available space. Your site title is quite long and is overrunning the bounds of the allotted space. This is likely the cause for this problem.

Hi Adam

Can you please confirm that you will be correcting the issues with blog images not re-sizing appropriately? I am ready to pull the trigger on Voyager pro but that will be a deal breaker for me.

Also, my font in the blog sidebar is a strange serif font that is different from the demo. I don’t see an option to change it in the settings. Can you check that in the non-pro version shipped with RW7.

Thanks and keep up the good work

JD

Hi there @jarroddale – Yes, the image responsiveness will be fixed. It should go out today or tomorrow. Depending on my support workload today.

Can you provide a link to the page you’re having the serif font problem with so I can have a look? If I can check that out that might help me diagnose your problem there.

Also, check to make sure you’ve not copied and pasted that sidebar content in from somewhere else. It may have brought the formatting with it from elsewhere. You can highlight the text, and goto the Format menu in RW and choose Clear Formatting.

Thanks Adam. No rush, I just wanted to make sure it wasn’t going to be a long term problem.

I will take a look at the sidebar formatting issue when i get home tonight. I thought I typed the content in directly, but I did turn it into a link, so that might have something to do with it. I don’t have a published site that I can share right now. Is there a way to use the CSS and change the sidebar font?

Sorry for newb questions, but when you update the theme, will I lose the formatting that I have already done or will that be maintained? How will I know an update is available?

JD

Is there a way to use the CSS and change the sidebar font?

Let’s not worry about this right now. We want to make sure we can see the problem first to determine what it is. There should be no need for custom code. The font should match the rest of the site, as it does on the live preview site (Voyager Pro theme Blog Sample Page - Elixir).

If you clear the formatting on the sidebar content and the problem persists, please ZIP up your project file and email it over to me at adam at elixirgraphics dot com and I can take a look.

Sorry for newb questions, but when you update the theme, will I lose the formatting that I have already done or will that be maintained?

Nothing should change for your project file. It and the theme are separate entities.

How will I know an update is available?

You will receive an email from me with a download link. I send the email out to the email address you provided during checkout when you purchased the theme.

Hey @ChrisL – When you get a chance will you mark the thread as solved on this post (Voyager Pro theme not responsive) so that people can find the post that solved your issue when coming to this long thread?

@jarroddale: Update just going out now. Should hit the inboxes of Voyager Pro customers within the hour.

Hi Adam, do you plan to use the waterfall plugin for your themes?

@rolisize – No, sorry I don’t. If you want to email me I can give you an explanation as to why. I don’t want to derail this thread topic too much more. LOL

@elixir the nav overlay is the same on my iPhone 6 as your screenshot, but the bottom menu item is very difficult to select due to the way the iPhone bottom page menu pops up - perhaps a few pixels of padding would solve the issue.

The page title length is probably the issue as you say, but it means the theme restricts the title length to 19 characters on an iPhone 6 and even less on an iPhone 5. Could the issue be solved by having only a logo and the menu icon on the top line and the title below, or even just smaller (scaled?) title font when screens drop below a certain width?

perhaps a few pixels of padding would solve the issue.

It would not I don’t think. I’ll take a look, but the theme / site can’t control that annoying little pop up toolbar in mobile Safari. :-/

The page title length is probably the issue as you say, but it means the theme restricts the title length to 19 characters on an iPhone 6 and even less on an iPhone 5. Could the issue be solved by having only a logo and the menu icon on the top line and the title below, or even just smaller (scaled?) title font when screens drop below a certain width?

Anything is possible, and I’ll have a look, but for now decreasing the length of your title will be necessary to prevent the problem.

All issues with the blog image size and the formatting of the sidebar fixed - thanks Adam.

2 Likes

I just been informed by Google too that the Voyager Pro theme I have just purchased is not responsive. I very hacked off because we spend a lot on advertising each day in addition to the cost of the theme. I cannot see a solution here to the problem and I either need to swtich back to the free theme or buy another theme.