{"id":2290,"date":"2012-03-09T10:39:02","date_gmt":"2012-03-09T10:39:02","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=2290"},"modified":"2012-03-09T10:39:02","modified_gmt":"2012-03-09T10:39:02","slug":"creating-a-mobile-version-of-an-opencart-shop-7","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2012\/03\/creating-a-mobile-version-of-an-opencart-shop-7\/","title":{"rendered":"Creating a mobile version of an Opencart shop \u2013 7"},"content":{"rendered":"<p>With a bit of help from some friends, I&#8217;ve now had the site tested on a couple of real mobile devices, with pretty positive feedback. The exception however was the button styling. The image below shows the button on the main (non-mobile) site, then the button on the mobile site, and finally the button as displayed on an iPod:<\/p>\r\n<img decoding=\"async\" src=\"\/images\/blog\/aw_mobile_10.png\" alt=\"Opencart buttons - that displayed on an iPod shows an oval button on top of a square button\" title=\"Opencart buttons\"\/>\r\n<p>My first thought was that somehow, the image from the main site was being superimposed on the coloured background from the mobile site. But it wasn&#8217;t anywhere in the css. Very puzzling. I finally twigged that it isn&#8217;t the main site background image, it&#8217;s the default input button used by Mobile Safari unless explicitly removed. Applying this css got rid of it:<\/p>\r\n<pre>input{-webkit-appearance:none;}<\/pre>\r\n<p>Needless to say, this problem didn&#8217;t show up in any emulator I used&#8230;.<\/p>\r\n<p>Next step I think will be to launch this and invite comments from users. Should be interesting.<\/p>","protected":false},"excerpt":{"rendered":"<p>With a bit of help from some friends, I&#8217;ve now had the site tested on a couple of real mobile devices, with pretty positive feedback. The exception however was the button styling. The image below shows the button on the main (non-mobile) site, then the button on the mobile site, and finally the button as [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[29,28],"class_list":["post-2290","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build","tag-mobile","tag-opencart"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=2290"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}