Advanced Customization can be done in the Controls
Products will be displayed in the bundle as per the product image size and screen size.
Merchants can choose how many products appear in each row on desktop and mobile. Just replace D with the number of products you want per row on desktop, and M with the number you want on mobile.
For example, if M = 3, then 3 products will show in each row on mobile. If D = 4, then 4 products will show in each row on desktop.
To fix this issue, navigate to the additional configurations within Branding Configuration
Copy and paste the code below into the Custom CSS Settings
For Full page bundle
@media screen and (max-width: 768px){
.gbbProductsItemsContainer {
grid-template-columns: repeat(M,1fr) !important;
}
}
.gbbProductsItemsContainer {
grid-template-columns: repeat(D,1fr) !important;
}
For the product page bundle
@media screen and (max-width: 768px){
.gbbMixProductsContainer .gbbMixProductsItemsContainer {
grid-template-columns: repeat(M,1fr) !important;
}
}
.gbbMixProductsContainer .gbbMixProductsItemsContainer {
grid-template-columns: repeat(D,1fr) !important;
}
(If you are facing any troubles or have further customization requests