Hi @waraqata,
Thanks for reaching out.
I understand what you are looking for. To show two columns in mobile view on the shop page, please copy the CSS code from below and paste it to the Appearance > Customize > Additional CSS section.
@media screen and (max-width: 481px){
.shopengine-shop .elementor-widget-shopengine-archive-products .shopengine-widget .shopengine-grid ul.products {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}
Let me know if you need further assistance.
Regards,
Amir
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
Hi, I have tried the CSS and it doesn’t work. still have one column on mobile view
Hi @waraqata,
Hope you are doing well. Could you please share the shop archive page link? We will check and send you the correct CSS. Looking forward to your response.
Regards,
Amir
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
ok. The link is
https://waraqata.store/waraqata-store
-
This reply was modified 3 years, 2 months ago by
Anonymous User 20760928.
Hello @waraqata ,
I hope you’re doing fine.
I have checked your site and noticed that the important property is missing from that code. You need to include that to overwrite the existing CSS code. Please copy the CSS code from below and paste it to Appearance > Customize > Additional CSS section. I hope it will help.
@media screen and (max-width: 768px){
.shopengine-widget .shopengine-archive-products ul.products {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}
Please clear the caches from your site properly to see the changes. Let me know if you need any further assistance.
Best Regards,
Prosenjit
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
Prosenjit Barman have tried the new css still not showing two columns on mobile view
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
It deleted the first CSS before adding the second one to the theme customization. When it didn’t work, I had to include the first CSS and purged all caches and thankfully it worked. Two columns on mobile view.
Thanks alot
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
However, the related products widget displays only one column on mobile view
Hello @waraqata ,
Glad to hear that the previous issue is resolved by purging the caches. Now, in order to display the Related Products in two columns, you can use the CSS code mentioned below.
@media (max-width: 767px){
.shopengine-related ul.products .product {
width: 45% !important;
transform: inherit !Important;
}
}
I hope it will help you to achieve what you’re looking for. If you need further assistance, please let me know. We are always here to assist you.
Best Regards,
Prosenjit
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
Hi, Prosenjit Barman
I tried the css, the related products shows two columns on mobile view. however, it doesn’t loop. If you set the products to show to be 10 after scrolling through 10 products, the screen becomes blank. Meanwhile the loop option is active in the carousel setting
Hello @waraqata ,
I hope you’re doing fine.
I can understand the matter. Can you please share the link to the page where you’ve placed the related product widget? So that I can check and help you to find a solution as soon as possible.
Looking forward to your response.
Best Regards,
Prosenjit
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
hi Prosenjit,
this is the link where the related products show
https://waraqata.store/product/fresheries-bean-powder/
Hello @waraqata ,
I hope you’re doing fine and I’m sorry for the delay in getting back to you.
Thanks for sharing the link. The Responsive Column controller has several logic to adjust the column as per the device resolution. If we try to adjust it using CSS, the solution might not be accurate.
So, Since that controller is not available in the ShopEngine Plugin right now, we have taken this as a feature request. I hope it will be added in the Future Update of the plugin so that users can adjust the Number of Columns for any breakpoints as per their needs.
Let me know if there is anything else you need help with.
Best Regards,
Prosenjit
Thread Starter
Anonymous User 20760928
(@anonymized-20760928)
Thank you for your response.
