Перейти к содержимому


Фотография
- - - - -

Responsive JBZOO


Лучший Ответ Kess , 07 August 2014 - 12:20

Hello,

 

I made some tests and I think the easiest way will be to add some CSS made by one person from our support, with small changes:

@media (max-width: 767px) {
	.jbzoo .width50,
	.jbzoo .width33,
	.jbzoo .width25,
	.jbzoo .width20,
	.jbzoo .width16{
		width: 49%;
	}
    .jbzoo .last {
        margin-right: 1% !important;
    }
}
@media (max-width: 480px) {
	.jbzoo .width50,
	.jbzoo .width33,
	.jbzoo .width25,
	.jbzoo .width20,
	.jbzoo .width16{
		width: 100%;
        height: auto !important;
	}
    .jbzoo .last {
        margin-right: 1% !important;
    }
}

And remove the previous css code that I gave you:

.jbzoo-app-chinese-market-db .subcategories > div {
    height: auto !important;
}

But still it will be better if you comment out the <div class="clear clr"></div> for your items and subcategories like in the topic which I referenced:

if ($isLast) {
//  echo '<div class="clear clr"></div>';
}

If you don't disable this, your items will look wrong when they are in two columns.

 

As I see on your website, you still didn't do it. Or are we talking about different websites? I have only one link from you.

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 M Salin

M Salin

Отправлено 31 July 2014 - 22:36

hello, i am still waiting the answer for the responsive, i am not a programmer and i can't do it by my self to change it, it should be already working as is done for ZOO that is responsive native. so please help in doing something...

i can make less items, but what about frontpage? where i have all categories, i can not put one category each line it will be a long page and so ugly!

 

thank you


  • 0

#2 Kess

Kess

Отправлено 01 August 2014 - 06:22

Hello,

 

As I already answered in your previous topic, I can't suggest anything about such problems if I don't see your website. Please, give me a link to it.


  • 0

#3 M Salin

M Salin

Отправлено 01 August 2014 - 13:25

sorry but i sent you a link and also an acces to my website! maybe i sent to the wrong email, can i email it in private to you?

kind regards


  • 0

#4 Kess

Kess

Отправлено 05 August 2014 - 06:14

Hello,

 

You have the same issue like in this topic. So you can try to use the solution from there for your items. And it's the same for subcategories, except the file to change is here:

media/zoo/applications/jbuniversal/templates/catalog/renderer/subcategory_columns/

Same as for the items, copy and rename _default.php and disable clearing div. And renamed files should be called chinese-market-db.php, since it's an alias of your application.

 

Also, for the mobile CSS, when your subcategories will be in one column, it would be good idea to override their height with something like this:

.jbzoo-app-chinese-market-db .subcategories > div {
    height: auto !important;
}

Because right now you are using js height fix which adds inline height style for those blocks and it will look bad when they are in one column.


Сообщение отредактировал Kess: 05 August 2014 - 06:30

  • 0

#5 M Salin

M Salin

Отправлено 05 August 2014 - 10:04

hello, sorry but still not working!

 

in subcategories folder i changed what you said but there is no clearing to disable

in items columns i did change name of file and disable clearing

in items i did changed name of file (of course copy another one) and no clearing to disable

 

for the Mobile css, where should i put it? i added these inside the jbzoo.css

  1. .jbzoo-app-chinese-market-db .subcategories > div {
  2. height: auto !important;
  3. }

and i saw the column height is working, but it could also work if i deactive it inside the configuration... because now it is working also in the website. anyway columns still always 4 and no responsive effect.


  • 0

#6 Kess

Kess

Отправлено 07 August 2014 - 12:20   Лучший Ответ

Hello,

 

I made some tests and I think the easiest way will be to add some CSS made by one person from our support, with small changes:

@media (max-width: 767px) {
	.jbzoo .width50,
	.jbzoo .width33,
	.jbzoo .width25,
	.jbzoo .width20,
	.jbzoo .width16{
		width: 49%;
	}
    .jbzoo .last {
        margin-right: 1% !important;
    }
}
@media (max-width: 480px) {
	.jbzoo .width50,
	.jbzoo .width33,
	.jbzoo .width25,
	.jbzoo .width20,
	.jbzoo .width16{
		width: 100%;
        height: auto !important;
	}
    .jbzoo .last {
        margin-right: 1% !important;
    }
}

And remove the previous css code that I gave you:

.jbzoo-app-chinese-market-db .subcategories > div {
    height: auto !important;
}

But still it will be better if you comment out the <div class="clear clr"></div> for your items and subcategories like in the topic which I referenced:

if ($isLast) {
//  echo '<div class="clear clr"></div>';
}

If you don't disable this, your items will look wrong when they are in two columns.

 

As I see on your website, you still didn't do it. Or are we talking about different websites? I have only one link from you.


  • 0




Click to return to top of page in style!