minicart
minicart copied to clipboard
jeffharrell
Mobile Support - minicart window width
Unless I'm misunderstanding this, is it correct that the minicart window, by default, is fixed at 400px across? If this is the case, is it the intention that on a mobile screen, at 320px across, the device is used horizontally so the whole minicart window can be seen rather than the sides being cut off? Before I create a custom CSS file /HTML but in order to have a window that is max 320px across, I thought I'd confirm before I tackle this. Thanks.
From what I've seen its fixed to 400px, I edited css on my site to 330px I think and adjusted one other setting so it sits in the middle the screen. Now it looks great on mobile too, I don't know if anyone else has any advice for us on this?
In the end, I retained the original minicart size as default but created a new custom theme.js file that is used when a mobile device is detected. It has a width of 300px and other stuff is moved around a bit. It needs a few tweaks and a banner at the top but otherwise does the job. (It does sit dead-on center on a mobile device but this is a screen shot from a desktop emulating a mobile):
The sample on the Minicartjs.com page works on a desktop and on desktop emulation but on my iPhone IOS 7 the add to cart button doesn't do anything at all?
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53
Have you got javascript turned on? I know that with Safari, for example, you can turn javascript on and off in the Safari Advanced settings menu.
Have now emptied cache on iPhone and turned off Javascript and the add to cart button sends you straight to paypal but there is no pop up window
@Userpete No one seems to be able to reproduce this. Is there something else you may be doing? Are you running into this from minicartjs.com itself, or some other variation of the code?
@SaracenX Your solve is best for now. I need to change the CSS on the cart to be relative past a certain minimum width to work for mobile.
@jeffharrell, would love to see that CSS change :) Thanks for keeping this project alive.
Here are the css changes I made for it to look good on mobile, you can adjust how you want but this keeps all the elements and doesn't remove anything. Probably don't need the !important tags but I keep them in: http://pastie.org/private/jjehs7phggllifpvs9bg
Thanks Jeff. I look forward to trying this out this week. Thanks for not forgetting this post.
/// Hector Cabarcas, Creative Director Fuzen Design Brand Development and Design 330.280.6210 fuzendesign.com
On Jan 20, 2015, at 1:08 PM, Nate82 [email protected] wrote:
Here are the css changes I made for it to look good on mobile, you can adjust how you want but this keeps all the elements and doesn't remove anything. Probably don't need the !important tags but I keep them in: http://pastie.org/private/jjehs7phggllifpvs9bg http://pastie.org/private/jjehs7phggllifpvs9bg — Reply to this email directly or view it on GitHub https://github.com/jeffharrell/minicart/issues/227#issuecomment-70702085.