Responsive template bootstrap alignment of goods
13 years 4 months ago #102889
by zlenko
my project ibaby.com.ua
Responsive template bootstrap alignment of goods was created by zlenko
How can I solve the problem with the alignment of the goods?
Blank areas at different heights ibaby.com.ua/buy/1002-avent
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.
13 years 4 months ago #102936
by nicolas
Replied by nicolas on topic Responsive template bootstrap alignment of goods
You should add the CSS below on your website to avoid the issue:
.hikashop_products .row-fluid .span4 {
height: 320px;
}
.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.
13 years 4 months ago #103068
by zlenko
my project ibaby.com.ua
Replied by zlenko on topic Responsive template bootstrap alignment of goods
Thank you. It really works!
But in a very narrow screen (resizing the browser window or screen mobile phone) blocks products overlap vertically.
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.
13 years 4 months ago #103086
by nicolas
Replied by nicolas on topic Responsive template bootstrap alignment of goods
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%;
}
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.
13 years 4 months ago #103194
by zlenko
my project ibaby.com.ua
Replied by zlenko on topic Responsive template bootstrap alignment of goods
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%;
}
}
/* 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.
13 years 4 months ago #103204
by nicolas
Replied by nicolas on topic Responsive template bootstrap alignment of goods
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 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.
13 years 4 months ago #103255
by zlenko
my project ibaby.com.ua
Replied by zlenko on topic Responsive template bootstrap alignment of goods
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.
13 years 4 months ago #103257
by nicolas
Replied by nicolas on topic Responsive template bootstrap alignment of goods
Your template overrides that CSS.
You will have to add !important to these rules if you want them to work.
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.
13 years 4 months ago #104113
by zlenko
my project ibaby.com.ua
Replied by zlenko on topic Responsive template bootstrap alignment of goods
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.243 seconds