Hi, I can change the column display on mobile to 2 columns (50%) through the provided features. But, can I set the number of columns on a slightly larger screen size? What is installed is a 3 column view, but I think it's too big. And I want to change it to 4 or something else.
Sorry, I meant changing the number of columns to 4 or some when on a tablet screen. Because on the carousel, it still displays 3 columns, while on the shop page it has become 4 columns following the edited CSS.
Unfortunately on the homepage where the carousel is there is not as easy as in the books section, the carousel cannot only be modified using CSS as it has JavaScript code which we cannot modify directly to get the best results, anyway to set it to 4 columns you can add this CSS to Custom CSS:
@media screen and (min-width: 769px) and (max-width: 991px) {
.wpb_wrapper .lab-vc-products-carousel .products .product {
width: 183px !important;
}
}
Thank you for your response. I have another question. This sounds silly, but I've lost my title. It does not show the category name or author name. What happened?
I've disabled the shadow on the product image and replaced it with border. However, on the blog post, it shows there is a space between the border and the image at the top. I have tried to fix it, but it doesn't work. Is there anything I can do?
P.S. If you have further questions or issues please create a new ticket instead of replying here, so this ticket which was created for another issue does not get messed up with other issues that are not related to the first ticket.
Hi,
I can change the column display on mobile to 2 columns (50%) through the provided features. But, can I set the number of columns on a slightly larger screen size? What is installed is a 3 column view, but I think it's too big. And I want to change it to 4 or something else.
Thanks!
Hi Rahmat,
Could you try adding this CSS to Custom CSS, it will switch from 3 columns to 4 columns in some screen sizes (tablets):
@media screen and (min-width: 769px) and (max-width: 991px) { .woocommerce .products.columns-5 .product { width: 25%; } }Best regards,
Laborator Team
Hi Art,
I added the code to the child theme and it worked. Thanks very much!
Furthermore, can I change the number of columns in my product carousel on the home page? I can't find any CSS code that works on it.
Hi Rahmat,
You can set the number of columns for the carousel by editing the page and set the columns:
Best regards,
Laborator Team
Sorry, I meant changing the number of columns to 4 or some when on a tablet screen. Because on the carousel, it still displays 3 columns, while on the shop page it has become 4 columns following the edited CSS.
I hope you understand what I mean. Thanks!
Hi Rahmat,
Unfortunately on the homepage where the carousel is there is not as easy as in the books section, the carousel cannot only be modified using CSS as it has JavaScript code which we cannot modify directly to get the best results, anyway to set it to 4 columns you can add this CSS to Custom CSS:
@media screen and (min-width: 769px) and (max-width: 991px) { .wpb_wrapper .lab-vc-products-carousel .products .product { width: 183px !important; } }Best regards,
Laborator Team
Hi Art,
Thank you for your response.
I have another question. This sounds silly, but I've lost my title. It does not show the category name or author name. What happened?
Hi there,
After troubleshooting your site I found out the problem is caused by PowerUp! for WooCommerce plugin, you will notice that if you disable that plugin.
Best regards,
Laborator Team
Thank you, Art,
I've disabled the shadow on the product image and replaced it with border. However, on the blog post, it shows there is a space between the border and the image at the top. I have tried to fix it, but it doesn't work. Is there anything I can do?
Hi Rahmat,
I am not sure I understand which part you are talking about, the space marked with the blue rectangle or the one highlighted with the red arrow:
(view large version)
Best regards,
Laborator Team
Hi Art,
In your image, the red one.
I mean the space between the top border and the product image in the post page. I have attached another picture.
Thanks!Hi again,
I have added the following CSS to Custom CSS:
.woocommerce .products .product .product-images .image-placeholder { margin-bottom: 0px; } .menu-cart-icon-container .lab-wc-mini-cart-contents .cart-items .cart-item .product-image img, .woocommerce .products .product .product-images img { margin: 0px; }P.S. If you have further questions or issues please create a new ticket instead of replying here, so this ticket which was created for another issue does not get messed up with other issues that are not related to the first ticket.
Best regards,
Laborator Team
Hi, I appreciate what you have done.
Keep healthy
Have a great day Rahmat
Best regards,
Laborator Team