Responsive Theme Mobile - Working For You?

[brotherantonio]

Greetings,
Would love your feedback on a couple of things...

1) Will you take a look at my site on your mobile device. Is it working for you? (not working well on my iPhone w Safari - looking scrunched to the left).
Welcome to The Sound Healing Store - Igniting The Spirit of Sound for Peace of Mind and Soul Awakening

2) Are you using a Responsive 3DCart theme? If so are you also using the mCommerce plug-in for Mobile devices or just relying on the responsive theme? What theme are you using and how's it working for you?

Thanks 3DCart peeps!

[mondo]

We have be playing with 32005, it has definite serious issues. We do not use the Mcommerce plugin.
Yours seems to be at least fully functional but your logo is pushing the rest of the template out of whack.
Tried this:
4" Windows 8 phone IE browser: the site itself fits right except the logo in both landscape and portrait goes past the screen. You can scroll over but the only thing there is the rest of the logo.
7" android Ice cream sandwich built in browser: landscape is full site looks/works fine. Flip to portrait and it switches to mobile display with logo past the screen a ways, the rt side of the site is a little off screen with it. you can scroll to see the rest.
7" android Jelly bean Chrome browser: landscape is full site looks and works fine. Flip to portrait it goes mobile and the logo is all there but the site scrunched to the left like your I phone.
Which template are you using? I think I can work with that one a lot easier.

[brotherantonio]

Houzz Theme

Hey Mondo,

Thanks for the reply... I am using the Premium Template "Houzz" that I was given as part of my sign-up bonus.

I have made the logo area bigger - re-sized it to 120% so it would fill in the header area a bit more - and am wondering if that is partly what might be causing the mobile viewing issue? I did shrink it back down and re-loaded the page on my phone, but it did not seem to change the problem. What I noticed on all phones I tried the site on is that the main body of the page is squished to the left. The slide show I use on the home page is an html link from a 3rd party site. Funny, that is the only thing that looks "normal" on the mobile version. (^_^)

I'm feeling discouraged at this point because I am getting push back from tech support that this is a "design issue" and they are not going to support fixing it. And, I did not come here to 3DCart land to become a website coding expert. I need an easy to use cart that I can set up and get going.

So, I am taking a step back from all of this in the moment to re-assess.

Thanks for your reflections and hope you find a template that works for you.

~ Bro A ~

[thecartdesigner]

change your your logo img rule to this:

#logo img {
max-width: 700px;
position: relative;
width: 100%;
}

also add this:

#logo.col-2 {
width: auto;
}

Then adjust the max-width:700px in media call sizes using the first rule for diff mobile screen sizes.


I only looked real quick because I have a ton on my plate right now

Hope this helps with the logo at least

[brotherantonio]

It's all "relative"

Thanks 3DCartDesigns - whoever you are.

I did not change to the 700px because I learned along the way that with responsive designs, always use % where you can. But, I did change the code of the logo which was "absolute" to "relative" and that did the trick on the website and also fixed some of what was happening on the mobile site. Now, the logo just looks distorted on the mobile - like it is being stretched. Uggg!

So, thinking I will either try the solution you suggested or might be forced into looking into how I can upload a different logo for the mobile site. That seems more like the way to go.

Also, there is something happening with the Menu's on the mobile version as well. Only the first Menu link and Category link are showing up. All the rest are hidden. :-(

Amazing that after a week of going back and forth with tech support that the best help I've had on this issue came forth here on the forum!

Thanks!

~ Antonio ~

[thecartdesigner]

No problem, Glad I could help.

using max-width and px is perfectly fine when its contained with width: % (normally 100%) in the same rule.

You have to remove the img inline rules width and height which I think you had as 640 and 80. when you remove those it should scale perfectly. You can remove the max-height in your css rule. It is disregarded since it is scaled by width

Thanks,
Shaun

[thecartdesigner]

Also, there is something happening with the Menu's on the mobile version as well. Only the first Menu link and Category link are showing up. All the rest are hidden. :-(

Its another max-height issue. Completely remove max-height from this rule:

nav.hz-cats-menu ul

[brotherantonio]

Hey Shaun!

Thanks again for the suggestions... I have tried several different things and I can't seem to get them both to work at the same time. When I use the 700px or even up to 900px, it seems the header frame is keeping the image locked into a certain size which is smaller than I am wanting. I really want to logo on the website to be large and in charge. And, when I remove that px line and just use max-width 100%, the site looks great but the mobile version doesn't. I also tried it with a custom header - I loaded the logo into the home page header area but I am getting the same kinds of results.

Thanks again for the reflections and I am appreciating the support from a fellow user! Wasn't expecting that! :-)

[thecartdesigner]

Not sure if you caught this in the above edit

also add this:

#logo.col-2 {
width: auto;
}

[brotherantonio]

OMG!!! You are a genius! I actually changed the max-height line from 35px to 100% and that did the trick! Wow, I am blown away that in 10 minutes you solved an issue that the support staff has been bouncing around for a week! You are not making 3DCart tech support look so good Shaun! :D Or, are you actually on staff and just trolling the forums?

[brotherantonio]

Whoops. Yes, I did miss that code. Will try it now. And, I am not sure what you mean by "Then adjust the max-width:700px in media call sizes using the first rule for diff mobile screen sizes."

Thanks again!

[thecartdesigner]

Wow, I am blown away that in 10 minutes you solved an issue that the support staff has been bouncing around for a week! You are not making 3DCart tech support look so good Shaun! :D Or, are you actually on staff and just trolling the forums?

LOL... Nope not part of 3dcart staff.

Glad I could help.

[brotherantonio]

Well, being a fan of good marketing techniques and believing that giving away great value away is the best way to attract new clients, I am appreciating that you are showing up here serving newbies like me as a way to demonstrate your skills and bringing awareness to your services. And, based on the way 3DCart Support has not been solving issues for me, I am guessing you are making a good living for yourself! Rock On! :-)

[thecartdesigner]

There are a lot of people around the forum that would have been able to help you out just the same. Its not marketing strategy... Although maybe my wife will suggest it as a strategy now...lol... I think most everyone here knows that I will always help where I can.

Thanks,
Shaun

[brotherantonio]

Hey Shaun,

Yes, I really appreciate your support. I have not been on the forums very much as it appeared to be quite lulled in here. So, I was not expecting much. And, yes, the fact that you are helping people and you obviously know what the heck you are doing is a great way to market your services. Just having your link on your messages as you do is all you need. :-)

With that, if you are open to fielding another one from me, I will toss out an inquiry to you here. I am using a 3rd party html plug-in slide show on the home page which I see is the cause of the mobile home page glitch. And, more importantly, I discovered that because it is not a "secured element" if a customer navigates back to the home page from Paypal, because the secure browsing follows them back to the home page, the slide show is no longer visible. (For the latter, is that normal operating procedures when people are re-directed back to the home page - to have secure browsing be "sticky' and follow them?) So, I am thinking of shifting to a new slide show and wondering if you have any recommendations? I see you sell one on your site but, no offense, I am opting for free in this moment if I can. And I chose not to use the built in one in 3DCart because it was lacking features that I wanted.

Thanks for the input!

~ A ~