Responsive template bootstrap alignment of goods

  • Posts: 115
  • Thank you received: 8
11 years 6 months ago #102889

How can I solve the problem with the alignment of the goods?
Blank areas at different heights ibaby.com.ua/buy/1002-avent

my project ibaby.com.ua

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 6 months ago #102936

You should add the CSS below on your website to avoid the issue:
.hikashop_products .row-fluid .span4 {
height: 320px;
}

The following user(s) said Thank You: zlenko

Please Log in or Create an account to join the conversation.

  • Posts: 115
  • Thank you received: 8
11 years 6 months ago #103068

Thank you. It really works!

But in a very narrow screen (resizing the browser window or screen mobile phone) blocks products overlap vertically.

my project ibaby.com.ua

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 6 months ago #103086

Normally the listing should go on one column automatically on small screens and thus you would not have the problem. That is normally done thanks to bootstrap's @media CSS on the span4 class but it seems that your template is missing that CSS in its bootstrap CSS code.

It should be something like that for example:
@media screen and (max-width: 767px) {
.span4 {
width:100%;
}

Please Log in or Create an account to join the conversation.

  • Posts: 115
  • Thank you received: 8
11 years 6 months ago #103194

I found a similar code in the template, and addedbelow, but nothing has changed - products is displayed in 3 columns:

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {
.span4 {
width:100%;
}
}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {
.span4 {
width:100%;
}
}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {
.span4 {
width:100%;
}
}

/* Only Phones */
@media (max-width: 767px) {
.span4 {
width:100%;
}
}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
.span4 {
width:100%;
}
}

/* Only Phones (Portrait) */
@media (max-width: 479px) {
.span4 {
width:100%;
}
}

my project ibaby.com.ua

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 6 months ago #103204

I don't see that CSS on your page.

Please note that your template has CSS caching activated so you won't see the changes until you clear that cache or turn it off. That's probably why you don't see any difference.

Please Log in or Create an account to join the conversation.

  • Posts: 115
  • Thank you received: 8
11 years 6 months ago #103255

I added the CSS in the style file HikaShop ibaby.com.ua/media/com_hikashop/css/style_venture.css?v=213

my project ibaby.com.ua

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 6 months ago #103257

Your template overrides that CSS.
You will have to add !important to these rules if you want them to work.

Please Log in or Create an account to join the conversation.

  • Posts: 115
  • Thank you received: 8
11 years 6 months ago #104113

A good solution to the problem of varying heights of the product - all products of the same height with the "soft" cutoff, and if you set the focus - there is a window with full information: rozetka.com.ua/notebooks/c80004/filter/preset=netbooks/

my project ibaby.com.ua

Please Log in or Create an account to join the conversation.

Time to create page: 0.067 seconds
Powered by Kunena Forum