I have purchased Voyager Pro and spent hours adapting my project to it. Everything works fine, but the theme is not fully responsive. Images on blog pages do not resize with smaller screens, and instead are shown as parts of the full images. Has anyone else found this? @elixir can you help please?
I’m sure Adam at Elixir will be able to help but I think I saw him say he was going away for a few days and that support would be a bit slower than usual. If you can hold fire for a bit I certain he’ll be able to help.
Rob
Thanks for the info Rob.
So now it seems to be even worse than a few blog images not being responsive. No image in the theme is resized responsively for mobile use, not even the banner images. Please look at this urgently Adam @elixir as my website has been destroyed by the theme.
Can you share a link to the site? Would be interesting to take a look…
Hey there @ChrisL – Sorry to see you’re running into problems. First, as @kryten mentioned, if you could share URL that will be a necessity in figuring things out.
I do want to reassure you that the theme is responsive, images and all. If you load up the live preview site you’ll see what I mean. I’ve linked you to the blog page since that is the one you mentioned above, but you can surf through the whole preview site as well: https://elixirgraphics.com/previews/voyager-pro/samples/blog/
As @robbeattie mentioned, I have taken some time off, but when I saw your message I wanted to hop in and get that URL so I can take a look. My first thought is that your host is serving the page up in a frame. I’ve seen this from a few hosts and it totally blocks the CSS of any site from being able to respond responsively. If we can see that live URL I’ll be able to check to see if that is the case or if perhaps it is something else.
Hi Adam. Thanks for getting back to me. It’s www.clphotography.co.uk but I’ve replaced it with Tesla Pro now. I’ll have to republish it tomorrow and let you know so you can see. Tesla Pro blog and banners work for me but Voyager Pro don’t.
If you wish you can publish the whole thing to a test folder somewhere. That would work fine as well. That way you don’t have to replace what is currently working for you. Maybe we can pull @dan into this thread too so he can see if he has any thoughts on this one.
@Elixir I’m not too sure how to publish to a test folder. I don’t see how it can be my host though because images in the project are not even responsive when viewed in RW7 before publishing.
@elixir and @dan the site using voyager pro is available to look at - www.clphotography.co.uk/test - please try it out on a desktop and a mobile. It definitely is not responsive in the banner, blog images, or menu overlay. Thanks.
@ChrisL regarding the blog images, have you tried using the blog entry topper image feature that’s included in Elixir themes? That’s the only difference I can see between your site and the demo site and I wonder if somehow that’s causing the problem with your images.
Elsewhere, the banner is behaving responsively but I suspect not in the way you want it to. In other words it looks as though the theme is trying to intelligently give you a best fit picture while maintaining the height of the banner as best it can on smaller screens - rather than reducing the size of the entire image.
I’m sure Adam will be along in a bit to explain it more clearly than I can.
Rob
@robbeattie haven’t tried the entry topper, but the blog content pages aren’t resizing either so not sure it would help but I’ll have a go. If the banner images only resize in one dimension then the theme isn’t any good for meaningful imagery, just abstract headers.
Actually @robbeattie I don’t want to try using the blog entry topper as it means changing the image alt tag and I use that for SEO.
Thanks for the URL! Really appreciate it. Helped me narrow some things down, especially since I have been away from the home office for a few days.
So a few things –
(1) Don’t worry yourself with the Blog Entry Topper. That shouldn’t matter. You image should work either way, whether in the blog entry or as a topper. We’ll get them working in the entry.
(2) The banners are indeed responsive and currently working on your site. They size, and crop themselves to fit the available space, depending on the height you’ve chosen or the amount of content in the ExtraContent area if using Flexible mode for your banner height.
The banner has to cover all of the specified area at all times, whether that area is based off of a height you’ve chose, or based off of your ExtraContent area’s content. This means it needs to crop itself, or scale the image up or down, to make that happen. The banner image is setup to be a backdrop for the banner content. Much like you see on the live preview site. It isn’t a banner setup where you’d want to have text on the image itself, as it would of course get cropped at times, depending on the banner area height, the width of the device at any set time, etc. You’d mainly use the banner as a backdrop, as I mentioned. Hope that makes sense. It is early here and no coffee has yet to be consumed, so there’s a chance it may not. LOL
(3) The regular images throughout the theme, which are not the banner or the Blog Entry Topper, are indeed not working as they should. Good news is it looks like it is an easy fix and just a small code omission on my part that was not caught during beta testing.
(4) The rest of the site is indeed responsive right now on your test though, as I can watch many of the responsive elements at work when I browse through the site, so it appears at first glance that it is only the img tags that are having a hiccup right now.
It is a pretty easy fix I think. I am away from the office until Monday though, so I won’t be able to push out an update for all users until then. I am going to send you a copy of the fixed theme right now, via email. Try installing it and let me know if that fixes your problem.
Adam
2 Likes
Hi Adam @elixir
Thank you, and sorry to make you work on your holiday 
The images are now responsive which is great, but it behaves very oddly on mobile now. My logo has been replaced with a random image from the content of the home page, but only on the home page and navigation overlay. There is no sticky navigation bar on the pages. The sidebar, which should be hidden, is shown at the bottom of a mobile page but is hidden on a desktop page. The title and header fonts seem to change when viewed live - sometimes lower and sometimes upper case at random.
Haven’t seen any other bugs as yet.
Chris
Can you try removing the test folder from your server and republishing all files? I only changed like two lines of code and none of what you’re referring to was touched.
@elixir have tried that but it just doesn’t work on a mobile - it’s great on desktop though. On a mobile the navigation pane only opens in landscape orientation, the icon is unresponsive in portrait mode; when the navigation pane opens it is huge and needs to be scrolled; if there are sub-pages in the navigation it prevents the parent page being selected; the header fonts and case change randomly; the banner resizes oddly, but I understand you designed it that way. I’ve only tried to use Voyage Pro because the full page only banner in Tesla Pro is restrictive and clients have told me they don’t realise there is content on the page as well as the banner, so Voyager Pro appeared to be a perfect solution, but it seems to be full of bugs in mobile mode.
@ChrisL – I am not seeing what you are at the mobile breakpoint. But maybe I’m not sure exactly what you’re seeing. Can you do some screen grabs so I can see it too? You can email them to me with the other stuff I’m looking for below. Also, can I get you to go to the live preview site for the theme (http://elixirgraphics.com/previews/voyager-pro) and let me know if you see the same problems there that you’re running into with your site?
Now that I’m on a laptop here I am seeing your meta tags, links to your fonts, javascript and more in the body of your site below the <head>, not where it should be at all. The way it should look, generally, is like mine on the right (screenshot: http://d.pr/i/1kkss).
I’m thinking something is wrong in, or with, your project file perhaps, now that I’m getting to look at it deeper.
Can you email me your project file, any stacks you’re using on the page that are not mine, and your banner images, all in a ZIP file? That way I can try to look it over here when I’m in the office first thing tomorrow morning. The email address is adam at elixirgraphics dot com
The drop-down navigation on a mobile seems to produce an excessively large panel that’s initially dedicated to the site name and logo–information that we generally already know. To then reach the actual navigation itself, visitors must then scroll down–but only on the text–otherwise the page behind the drop down scrolls, which means (a) actual navigation forces visitors to cover up with their fingers what their choices are, and (b) if you change your mind and then choose to remain on the same page, you’ve lost your place because you unknowingly scrolled away from where you were while trying to navigate on the dropdown page.
Screenshot taken on a 4s, which I think is the same size as an SE.
There’s an option on the pro version to hide the logo and site title, as far as any critique of the navigation style I have no problem with it, I do notice a lag on the blur with chrome Android when activating the menu, other than that another solid theme from Adam.