CSS Intelligent Shoe in Internet Explorer does not look good

Hi All,

I've followed what is described in https://www.gavick.com/forums/quark/css ... dule-45582 and I managed to place a better appearance on the big-photo-img, specially when this image is in Internet Explor. To do so I included this code in override.css:

.intelligent .big-photo .big-photo-img {
background: #eeaa33;
height: 100%;
position: absolute;
background: url('../../../images/demo/ecommerce/shoes_bg.jpg') 0 0 no-repeat;
background-size: cover;
background-position: 50% 50%;
margin-left:10px;
}

.artesanas .big-photo .big-photo-img {
background: #eeaa33;
height: 100%;
position: absolute;
background: url('../../../images/demo/ecommerce/Antigua.jpg') 0 0 no-repeat;
background-size: cover;
background-position: 50% 50%;
margin-left:10px;
}

I have two custom html in my web site based on the "Intelligent shoe" module, that's why I had to use a page class sufix (intelligent and artesanas) so put different images.

The appearance is better now even in Internet Explorer but I have the problem when I fall in a display which is lower than 840px. Simplye the image dissapears. I know the image is there, behind the "desc", but I'm not able to create the same behaviour you have in the quark demo where the image goes on top before the desc section.

Can anybody help? I would really appreciate it.

Live site: http://www.montaneshoes.es

Thanks.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:479px) {
.intelligent .big-photo .big-photo-img {
    height: 500px;
    margin: 0;
    position: relative;
    z-index: 100;
}
}