Public Forums 71,145 posts

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#718938

I am using Purity 3 and put the following media code in custom.css to make my website responsive:

@media only screen and (max-width: 2000px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 32% !important;}

@media only screen and (max-width: 970px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 50% !important;}
}
@media only screen and (max-width: 750px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 100% !important;}
}

And all is working fine in Mozilla, Opera and Chrome, but it seems that something breaks in Purity 3 or Hikashop (I suspect Purity 3) for Internet Explorer and on android, as in internet explorer and android the above code seems to be ignored completely (see photos).

So basically as I’m changing the size of browser, in Mozilla, Opera and Chrome everything is responsive and is resizing (photo1), but in IE and on android it is not resizing (photo2 and photo3)

Could you help me on this pls?

Kind Regards

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#719056

Hi @pawelgol4,

It’s because basically, IE doesn’t support @media queries and all responsive websites are broken in IE.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#752893

Hi @pawelgol4,

It’s because basically, IE doesn’t support @media queries and all responsive websites are broken in IE.

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#719250

Thx for answer 🙂

Actually really weird thing is that is reads the @media, but only the first line (in IE and android, in others is ok)

@media only screen and (max-width: 2000px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 32% !important;}

and that’s why it shows 3 columns. If I change 32% –> 50% here:

@media only screen and (max-width: 2000px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 50% !important;}

then it changes and shows only 2 columns, (both in IE and on android)

That’s not best, but I guess I’ll just play with it a bit, and see what works, maybe I’ll try min-width or somehow ranges or mid etc. and I’ll see what works, and I’ll write it here.

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#752983

Thx for answer 🙂

Actually really weird thing is that is reads the @media, but only the first line (in IE and android, in others is ok)

@media only screen and (max-width: 2000px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 32% !important;}

and that’s why it shows 3 columns. If I change 32% –> 50% here:

@media only screen and (max-width: 2000px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 50% !important;}

then it changes and shows only 2 columns, (both in IE and on android)

That’s not best, but I guess I’ll just play with it a bit, and see what works, maybe I’ll try min-width or somehow ranges or mid etc. and I’ll see what works, and I’ll write it here.

[Author]

Posts