Anybody Using Free Responsive Template Successfully?

I selected a free responsive template, but after making numerous tweaks (nothing that broke the template), it turns out the template is not showing well at 1024 x 768 and probably several other resolutions as well. There's also the matter of links not working when used for a mobile device and a few other issues. I'd like to know if anyone can recommend a free responsive template that actually works.

So much time has been put into making this template the way I want it by my coding person, but the functionality is what is lacking and quite frankly, neither of us are proficient in responsive templates.

Template is still in test mode while my coding person attempts to fix so many things. Designer now says template not quite advanced for optimized layout on various devices and responsive.css file would need to be played around with. Where does one start?

Before any more time is put into this, I was wondering if anyone had one of these that functioned properly. Please understand we are not expecting to just install and 1,2 3 GO, but just basic functions, and the ability to look correct in all browsers/resolutions/devices with normal amount of adjustments. If we knew how to code for a responsive template, we'd be the one releasing them to the forum.

Would love to hear from anyone that has installed successfully and fully functional. My assumption was thinking a template labeled responsive would look equally as good in most resolutions. I believed that I would have much to do to get it cosmetically agreeable, but certainly didn't expect to have it so radically unacceptable at different resolutions. Isn't that the whole point of being named responsive?

Thanks so much!

Thanks!

It would help to know what template you installed. We could install it on a test site and see if our results are the same as yours. Personally, old coot that I am, I think all the 'responsive' templates (not just for Zencart) look like crap on other-than-mobile screens. Too BIG and too much space between elements. Sadly, We're stuck with this situation as long as folks insist on interacting with life entirely through their telephones.

traytray:

I'd like to know if anyone can recommend a free responsive template that actually works.

I would recommend using the Westminster New, Winchester Black, or Winchester Responsive instead of All_Business.

We've been using Westminster_New with minimal issues since August 2014. The latest update fixed many/most of the issues which were found.

stevesh:

It would help to know what template you installed. We could install it on a test site and see if our results are the same as yours. Personally, old coot that I am, I think all the 'responsive' templates (not just for Zencart) look like crap on other-than-mobile screens. Too BIG and too much space between elements. Sadly, We're stuck with this situation as long as folks insist on interacting with life entirely through their telephones.

I love technology, but when I see a few people sitting together out to dinner and every one of them is texting, and there is no conversation among them, I'm truly puzzled.

Anyway, the responsive template is All_Business.

The person doing my coding uses 1366 x 768 and I have seen screen shots of her display with this template and it looks good. I use 1024 x 768 and no matter how she sets the fonts, or how much or how little zoom I use, it never looks good. It's all about the fonts being either much too large or much too small. What's immensely frustrating is how perfect it looks on the demo. I am sure there are other resolutions between mine and hers that will also behave badly.

Another problem we recently discovered is that when you shrink the screen to mimic a mobile device, the links that are visible don't work correctly. Some links do nothing, while others bring the link you clicked on to the very bottom. It looks like nothing happened until you decide to scroll all the way down and then you see the result.

When certain items are clicked on, it will bring you to the current live non-responsive store, so once things start to look good, I know I am no longer in the test store.

I'll look forward to your investigatory findings.

Thanks!

RixStix:

I would recommend using the Westminster New, Winchester Black, or Winchester Responsive instead of All_Business.

We've been using Westminster_New with minimal issues since August 2014. The latest update fixed many/most of the issues which were found.

That is one we haven't tried yet. I believe she tried Winchester_Black and encountered problems. I am now looking at the demo of Westminster_New and it has the dropdown menu in the header and I really dislike that type of navigation.

I am now looking at your website and I see that you had to resort to a tutorial regarding easier navigation for certain devices. It reminds me of years ago when websites often declared which browser you could best see their site at. I think this is going backwards. I do appreciate you took the time to respond. I could never be pleased with a template if I was forced to instruct visitors on best viewing practices.

Thank you again!

traytray:

Another problem we recently discovered is that when you shrink the screen to mimic a mobile device, the links that are visible don't work correctly. Some links do nothing, while others bring the link you clicked on to the very bottom. It looks like nothing happened until you decide to scroll all the way down and then you see the result.

Device emulators are not always detected by the responsive software. Sometimes it takes actual devices.
Sometimes, incorrect sidebox setup can cause issues similar to your description when the pages are reformatted on-the-fly for mobile devices by the responsive software

Curious.... Does the All Business demo behave the same as your setup? I say that because it is much easier to use the demo than the time it takes to install in a test site and go through the setup.

FireFox/Tools/WebDeveloper/ResponsiveDesignView in the 768x1024 and 1024x768 seems to function without the issues you have described. Mobile screen sizes look and function OK.

traytray:

When certain items are clicked on, it will bring you to the current live non-responsive store, so once things start to look good, I know I am no longer in the test store.
That doesn't sound like a template issue.

Regarding my site. Android devices are a designers nightmare due to the huge number of screen sizes and other browser combinations. I think that issue was remedied in the latest Winchester_New update. I just haven't taken the time to install it. The percentage of users who actually have the issue due to the menu collapsing only occurs on a very small percentage of tablet devices (in the single digits). There is no issue in how the site "Looks" or "Best viewed with xxx browser". It is only the slimmenu functionality on certain Android devices.

I'll take a look. Of course there are lots of ways to be judged mobile-friendly :laugh::

RixStix:

Device emulators are not always detected by the responsive software. Sometimes it takes actual devices.
Sometimes, incorrect sidebox setup can cause issues similar to your description when the pages are reformatted on-the-fly for mobile devices by the responsive software

Curious.... Does the All Business demo behave the same as your setup? I say that because it is much easier to use the demo than the time it takes to install in a test site and go through the setup.

FireFox/Tools/WebDeveloper/ResponsiveDesignView in the 768x1024 and 1024x768 seems to function without the issues you have described. Mobile screen sizes look and function OK.

That doesn't sound like a template issue.

Regarding my site. Android devices are a designers nightmare due to the huge number of screen sizes and other browser combinations. I think that issue was remedied in the latest Winchester_New update. I just haven't taken the time to install it. The percentage of users who actually have the issue due to the menu collapsing only occurs on a very small percentage of tablet devices (in the single digits). There is no issue in how the site "Looks" or "Best viewed with xxx browser". It is only the slimmenu functionality on certain Android devices.

The demo behaves perfectly on my 1024 x 768 resolution. But once the test store was created, there were immediate problems with text size being too small and when that was tweaked, it became too large. As for the mobile devices, I don't have a phone to test it on myself, but just shrinking the page, I get the issues I mentioned.

I'm hoping this can be remedied, because beyond all the time and effort that went into getting it to look the way I want, I actually like the template and thrilled it just has side nav and no mega-menu or drop down/flyout design to contend with.

My test site (stevesh.com/demogoogle2) looks good at 1280X1024 and 1024X768. No text size issues that I can see. Also OK on online iPhone and Android emulators. Apparently Google doesn't care how far visitors have to scroll down as long as they don't have to scroll side-to-side.

I like this template, too. Another winner from Picaflor Azul.

I'm pretty sure that there is some customization or overlooked item in the setup causing your site to look and/or behave differently from the demo. Your coder has probably accidentally broken the responsive nature of the template.

Getting back to a known starting point might be the easiest thing to do instead of identifying and "Un-doing" the changes made by your coder.

Reading the support thread for this and other responsive templates can help with issues. Sometimes an issue discussed in a different responsive support thread can be applied similarly to others.

ok guys, here I am too, this is a test store she has it on, thank god not her live one. 1.5.4, fresh install out of box so to speak.....the only template installed aside from default that come with cart is All Business.

The only changes to the store is colors changes, text transfers from her live store files to the test store files and all in override folders so nothing on core files are touched....except the ones that were indicated by the installer for this template.

I have a mac that can do many sizes of screen res plus a pc that is that same and truthfully I have issues however she has IE (not sure of version) FF latest version and Chrome....and yet she sees things much differently. She does prefer to use the screen res of 1024x768 and sees things much different when viewiing the test store.

I have my Motorola X Second Gen and that is the one where I myself visited the test store in. The template does act responsive but the first batch of links only have 2 that work . There are 7 link blocks at the top under the logo/tag line:

shopping Cart < loops back to HOME
Log In ---- works
Shopping < loops back to HOME
Quick Links < just hilights but does nothing
Information <same as above
Search < loops back to HOME
Contact Me---- works by putting contact form at bottom of screen

Now personally I do not like responsive ones either and if they are needed i wish there was someone to make on that when the media is detected to be used on a phone or something like that --- then it would auto switch to the proper template and not have to be visible all the darn time.

I have a test store of my own also fresh install and only winchester_black installed (my live store is black so thought yay thisone is perfect and needs only color changes...yeah right. It is not behaving and have not delved into it more since I a trying to get hers to work. If I recall it did not let me add the sideboxes...not even the default ones.

Not sure if she gave you her test link but here it is: http://storetest.designerperfumesnob.com
mine is: http://fantasiesrealm.com/market3/index.php

We as users, should not be expected to just fiddle with the responsive.css cause we could ruin things more than they already are. I know enough that if even a little is messed up it loses its responsiveness.

I appreciate any and all assistance. I am not the worlds greatest coder but if told what I need to fix/where/how I can usually make it so. My 62 year old brain is total mush lately with this template and the other one. I also know since I run a store and tell my creators this all the time, when they get frustrated with "fixes" needed to their products, and I hear that it is "only a freebie". I tell them that yes it may be a freebie, but it also reflects on them and their work, if people have problems with the free items will they really want to try something that is paid for item? With the thought in the back of their minds that will it not work right either.

I appreciate all the work it takes to make these things that we do not know how to do so but supporting the free like the paid is supported is not really much to ask....IMHO

I have a mac that can do many sizes of screen res plus a pc that is that same and truthfully I have issues however she has IE (not sure of version) FF latest version and Chrome....and yet she sees things much differently. She does prefer to use the screen res of 1024x768 and sees things much different when viewing the test store.

I'm using IE11 and 100% View and Medium fonts. That is just what I happen to prefer. When I click on the link you provided for the store test, http://storetest.designerperfumesnob.com it displayed at 75% and the top sidebox: "Shop By Designer," has several of the designers names hidden. It looks as if the box is too narrow to display the entire box.

On FF, using the link you provided, it opened up at 80% and it also has the designers names partially hidden.

I'm not sure why using your link the test store displayed at those percentages rather than full screen. Using the lesser percentage makes the page display so much better, (but there are still some problems), but if the store were live, would the visitor see it at 80% or more likely whatever they had their view set? If that were true, then I am forcing them to change their view percentage in order to see the site better. I don't have to do that for the demo. I can view it at full screen 100% and it looks perfect, while the test store has huge fonts at that view.

I'm simply trying to present the store as the demo is - with no need for the visitor to have to work at getting it to look right.

I am not sure what you mean however, I hardly ever use full screen and still see everything as it should be. The screenshot shows you that even without it being full screen it looks proper on my 1680x1050 screen

Click HERE to see the image since it still won't let me delete nor upload attachments

DarkAngel:

I am not sure what you mean however, I hardly ever use full screen and still see everything as it should be. The screenshot shows you that even without it being full screen it looks proper on my 1680x1050 screen

Click HERE to see the image since it still won't let me delete nor upload attachments

The thing I am most concerned about is if the visitors will see it perfect like the demo, or with names hidden in the top sidebox, as I do. If I were the ONLY person that saw it misbehave, I can live with that. I am not convinced I am the only one.

Is there anyone that can check out the test store http://storetest.designerperfumesnob.com in 1024 x 768 and see if you have any issues? Since I was told by the designer of this template that it had issues in different devices, I am guessing others will see it as I do and be forced to change their settings, or worse, click off and shop at a friendlier site.

Thank you so much.

@traytray

storetest displays fine on my screen (1280x1024) I changed it to 1024x768 and it's fine.
On my mobile LG dropdown menu not working.

@DarkAngel

market3 displays fine, and on mobile dropdown works fine, but both in desktop, and mobile all links get error:
warning an error occured please refresh, and try again.

traytray:

The thing I am most concerned about is if the visitors will see it perfect like the demo, or with names hidden in the top sidebox, as I do. If I were the ONLY person that saw it misbehave, I can live with that. I am not convinced I am the only one.

Is there anyone that can check out the test store http://storetest.designerperfumesnob.com in 1024 x 768 and see if you have any issues? Since I was told by the designer of this template that it had issues in different devices, I am guessing others will see it as I do and be forced to change their settings, or worse, click off and shop at a friendlier site.

Thank you so much.

I have actually posted exactly the same advice in the template support thread, but since you feel it necessary to start another thread about this I will post again.

The Responsive All Business package was built using the first version of the DIY template default. This version relied solely on media queries for the responsive layout. The newer templates, Westminster New, Winchester Responsive, and Winchester Black are built using the latest version of the DIY template default. This version is more advanced, and yes, better than the first version because it uses google's php mobile detect script to serve up optimized layouts based on user agents. I would strongly recommend switching to one of these more recently updated template packages.

As with any of my newest responsive template packages, if you want to view the mobile layout using a desktop and an emulator you should use a link like this:

your domain name .com/inindex.php?main_page=index&display_mode=isMobile

If you want to view the tablet layout using a desktop and an emulator you should use a link like this:

your domain name .com/inindex.php?main_page=index&display_mode=isTablet

And use this to switch back to a desktop when you are finished:

your domain name .com/inindex.php?main_page=index&display_mode=isDesktop

I also want to mention that out of the box, there is nothing wrong with the Responsive All Business layout on various screen sizes.

http://durl.me/8rr9qd

Looking at your site, it is obvious that you have made changes that have broken the layout:

http://durl.me/8rr9vh

Thanks,

Anne

traytray:

The thing I am most concerned about is if the visitors will see it perfect like the demo, or with names hidden in the top sidebox, as I do. If I were the ONLY person that saw it misbehave, I can live with that. I am not convinced I am the only one.

Is there anyone that can check out the test store http://storetest.designerperfumesnob.com in 1024 x 768 and see if you have any issues? Since I was told by the designer of this template that it had issues in different devices, I am guessing others will see it as I do and be forced to change their settings, or worse, click off and shop at a friendlier site.

Thank you so much.
**
Most of this discussion would be better addressed if in the template support thread.** Anne knows more about the template than all of us combined.

1024x768: Looks OK
768x1024: Looks fouled up

While I have not perused the README to see how setup differs from other templates, something you have done has affected the responsive design. The sidebox layout appears to be different than the demo. Sidebox width appears to be different. Something doesn't seem right with the centerbox settings.

Did you setup the template per the instructions so that it appeared EXACTLY like the demo before you started tweaking things? Or did you make tweaks and now expect it to function like the demo?

Does your column width setup differ from the demo settings?

Turning nearly ALL of the "Show Box @ min-width" to OFF will help on mobile device presentations.

keneso:

@traytray

@DarkAngel

market3 displays fine, and on mobile dropdown works fine, but both in desktop, and mobile all links get error:
warning an error occured please refresh, and try again.

That's it, still no idea why either...but I will reinstall everything from scratch much later to see, thanks for looking.

RixStix:

**
Most of this discussion would be better addressed if in the template support thread.** Anne knows more about the template than all of us combined.

1024x768: Looks OK
768x1024: Looks fouled up

While I have not perused the README to see how setup differs from other templates, something you have done has affected the responsive design. The sidebox layout appears to be different than the demo. Sidebox width appears to be different. Something doesn't seem right with the centerbox settings.

and yet aside from the links not working that I mentioned I do not see the problems she sees, werid.

Did you setup the template per the instructions so that it appeared EXACTLY like the demo before you started tweaking things? Or did you make tweaks and now expect it to function like the demo?

Does your column width setup differ from the demo settings?

Turning nearly ALL of the "Show Box @ min-width" to OFF will help on mobile device presentations.

when it was installed it appeared with small looking fonts, she wanted them a bit larger and it has been either they go too large or too small...that has since been straightened out.

Everything else was like the demo except the database info to get the products inserted to check those things out. I did the store software from a fresh clean install of 1.5.4 and not a copy of her store/db then just upgraded with new files....which is the way it was instructed on how to here in forum.

I removed the 3rd column per owner request, set the "show box" to the size it is thinking that is what we were supposed to do.

as far as I can remember the sizes are the same save the space between the image to its border...just a few pixels added to equalize the white space...in stylesheet.

I even went so far as to segregate what i edited in stylesheet into a section labeled as my edits to ensure ease of finding what was edited from original then be ale to put it back via copy/paste from the original.

If need be I will reinstall the entire test store with original db from installation to see it it behaves then HOWEVER,

to those of us NOT accustomed to these newer templates with responsiveness capabilities there should be better instructions for installation since they are not like the others with just upload files and install sql. We need to know what we should turn on/off in order to not break it.

If it is supposed to use 3 columns to make sure it is not messed up if we prefer to turn one off globally. Why is the responsive.css there too, what can/can't be changed, for instance.

Not trying to be difficult here, just an ignorant old woman trying to keep up/understand new stuff.

If I am using this template as a 2 column layout, can the total sum of the width be used as I pleased? If not, say the left sidebox width remained untouched, so then could the center column width be as wide as the center column + 3rd column?

Using 2 columns, I of course have to change the width of the center column or there is just a blank space running down the right hand side of the page. If doing this broke the responsiveness, what would be the correct way to arrange for a 2 column layout?

Thank you~