VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: mcintyro on May 21, 2017, 13:25:07 PM

Title: Responsive layout issue on iPhone Safari Browser
Post by: mcintyro on May 21, 2017, 13:25:07 PM
I have an issue using Virtue Mart 3.2.2 on PHP 7.0.19 and Joomla 3.7.1

When I look at my store: https://www.borderhighlands.com/store on an iPhone iOS 10.3.1 using the default Safari mobile browser the buttons for add to cart and quantity are poorly laid out as per the attachments.  When I simulate a responsive layout using Firefox on a PC the layout is fine.  Can anyone help suggest what this could be?

Thanks
Ross
Title: Re: Responsive layout issue on iPhone Safari Browser
Post by: jenkinhill on May 21, 2017, 15:13:18 PM
Layout is fine on my HTC10 Android phone using chrome and firefox and is OK using safari 5.1.7 on Win10 when using a narrow viewport. So maybe you need to check for OS/screen browser & width and apply custom css.  eg https://www.handsetdetection.com/properties/platforms/iOS/10.3.1
Title: Re: Responsive layout issue on iPhone Safari Browser
Post by: Jumbo! on May 22, 2017, 11:51:44 AM
Add the following custom css to your template.


span.quantity-controls input.quantity-controls {
    overflow: hidden;
    padding: 0;
    border: none;
}
Title: Re: Responsive layout issue on iPhone Safari Browser
Post by: mcintyro on May 24, 2017, 22:16:17 PM
Jumbo!...thank you very much....that worked a treat!