products per row in safari not working.

conchi · February 05, 2018, 11:20:18 AM

Hi,

Products per row in virtuemart 3.2.12 with protostar template are not working correctly since last update. Joomla 3.8.3.

On safari, if I set 4 products per row, it shows 3 products in one row,and anonter single product in a different row. The same occurs if I set 3 products per row: It show 2 products in one row, and one product in another row. It only occurs in safari browser. In edge, explorer and Chrome it Works correctly.

Thanks in advance.

jenkinhill · February 05, 2018, 12:21:15 PM

Sounds like an issue with the Safari css box model working differently from other browsers. Sarafi supported css is listed here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

I encountered a similar issue a couple of years ago and solved it by using the HTML5 doctype in the template header. < !DOCTYPE html >

conchi · February 05, 2018, 12:29:05 PM

Hi, thanks for your answer.

I would like to know how to do that and where exactly I have to do that change. I mean, in which file do I have to change that parameter?

Thanks in advance

conchi · February 05, 2018, 12:44:03 PM

In my template I have the following in index.php:

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<m-eta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />

jenkinhill · February 05, 2018, 12:58:16 PM

I just checked page code for Protostar in J3.8.4 and can confirm that it does already have the HTML5 doctype:

Code Select


<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>

So you may have to look at the css itself. I only have an old version of Safari here and there is no problem with the row display. Maybe look at the css.

conchi · February 05, 2018, 13:28:20 PM

Ok, but I am too lost with that.

I would like to know where exactly is the problem.

Studio 42 · February 05, 2018, 13:43:08 PM

This is a general problem in the VM rules, best is to overide the category view and products sublayout and change the HTML

conchi · February 05, 2018, 13:52:21 PM

I have found the solution. I have just updated from Joomla 3.8.3 to 3.8.4 and it was solved.

Studio 42 · February 05, 2018, 14:06:40 PM

Strange that the problem is in Joomla, but perhaps they update the protostar CSS

News:

products per row in safari not working.