Grid on Safari...

When trying to incorporate Metro Grid to a new landing page for my news website.
It does not render OK in IOS Safari, it all shows in one line and the grid does not displays all the way down...
Please look a t the attach image...

Or visit the live hidden page https://meganoticias.mx/portada-3

thanks

Hi

Please send me an access to Your joomla panel. I need to check some settings and version of a module and template.

Just sent the access in a private message...
FYI I am also trying this other version, wider, at https://meganoticias.mx/portada-4
and it has the same issue....

Hi

I've send Your details to programmers. Will let You know as soon as they will answer me.

Any news from the programers?

Thanks

Hi

Och, yes. So sorry. I turned off notifications for this extension by accident and they replied a week ago

Programmers said that they can see that an inline style code for Grid module is not generated in Your site. None of the tests they've done with our demo did not show same problem under IE, so they suspect that there is some 3rd party extension involved here or some server settings.

They proposed a quick fix to generate the code in FF and copy it to override.css so it will not need to be generated back in IE.

Code right now is:

Code: Select all

#gk-grid-755 .gkGridElement { border: none; }
.gkGridGK5 .gkImgDesktop { display: block; } .gkGridGK5 .gkImgTablet, .gkGridGK5 .gkImgMobile { display: none; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-1-1 { height: 40%; width: 66.6666666667%; left: 0%; top: 0%; z-index: 1; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-2-1 { height: 20%; width: 33.3333333333%; left: 66.6666666667%; top: 0%; z-index: 2; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-3-1 { height: 20%; width: 33.3333333333%; left: 66.6666666667%; top: 20%; z-index: 3; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-4-1 { height: 20%; width: 50%; left: 0%; top: 40%; z-index: 4; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-5-1 { height: 40%; width: 16.6666666667%; left: 50%; top: 40%; z-index: 5; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-6-1 { height: 40%; width: 16.6666666667%; left: 66.6666666667%; top: 40%; z-index: 6; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-7-1 { height: 40%; width: 16.6666666667%; left: 83.3333333333%; top: 40%; z-index: 7; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-8-1 { height: 20%; width: 50%; left: 0%; top: 60%; z-index: 8; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-9-1 { height: 20%; width: 33.3333333333%; left: 0%; top: 80%; z-index: 9; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-10-1 { height: 20%; width: 33.3333333333%; left: 33.3333333333%; top: 80%; z-index: 10; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-11-1 { height: 20%; width: 33.3333333333%; left: 66.6666666667%; top: 80%; z-index: 11; }
@media (max-width: 840px) {
.gkGridGK5 .gkImgTablet { display: block; } .gkGridGK5 .gkImgDesktop, .gkGridGK5 .gkImgMobile { display: none; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-1-1 { height: 50%; width: 75%; left: 0%; top: 0%; z-index: 1; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-2-1 { height: 25%; width: 25%; left: 75%; top: 0%; z-index: 2; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-3-1 { height: 25%; width: 25%; left: 75%; top: 25%; z-index: 3; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-4-1 { height: 25%; width: 25%; left: 0%; top: 50%; z-index: 4; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-5-1 { height: 25%; width: 25%; left: 25%; top: 50%; z-index: 5; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-6-1 { height: 25%; width: 25%; left: 50%; top: 50%; z-index: 6; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-7-1 { height: 25%; width: 25%; left: 75%; top: 50%; z-index: 7; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-8-1 { height: 25%; width: 25%; left: 0%; top: 75%; z-index: 8; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-9-1 { height: 25%; width: 25%; left: 25%; top: 75%; z-index: 9; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-10-1 { height: 25%; width: 25%; left: 50%; top: 75%; z-index: 10; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-11-1 { height: 25%; width: 25%; left: 75%; top: 75%; z-index: 11; }
}
@media (max-width: 600px) {
.gkGridGK5 .gkImgMobile { display: block; } .gkGridGK5 .gkImgDesktop, .gkGridGK5 .gkImgTablet { display: none; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-1-1 { height: 16.6666666667%; width: 100%; left: 0%; top: 0%; z-index: 1; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-2-1 { height: 16.6666666667%; width: 50%; left: 0%; top: 16.6666666667%; z-index: 2; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-3-1 { height: 16.6666666667%; width: 50%; left: 50%; top: 16.6666666667%; z-index: 3; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-4-1 { height: 16.6666666667%; width: 50%; left: 0%; top: 33.3333333333%; z-index: 4; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-5-1 { height: 16.6666666667%; width: 50%; left: 50%; top: 33.3333333333%; z-index: 5; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-6-1 { height: 16.6666666667%; width: 50%; left: 0%; top: 50%; z-index: 6; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-7-1 { height: 16.6666666667%; width: 50%; left: 50%; top: 50%; z-index: 7; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-8-1 { height: 16.6666666667%; width: 50%; left: 0%; top: 66.6666666667%; z-index: 8; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-9-1 { height: 16.6666666667%; width: 50%; left: 50%; top: 66.6666666667%; z-index: 9; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-10-1 { height: 16.6666666667%; width: 50%; left: 0%; top: 83.3333333333%; z-index: 10; }
#gk-grid-755 .gkGridElement.gkGrid-mn-grid-11-1 { height: 16.6666666667%; width: 50%; left: 50%; top: 83.3333333333%; z-index: 11; }
}


so You can simply copy what I just pasted to override.css file and make sure override is enabled in template settings.