Top

Change the Mobile Appearance of Product Bundles

On some smaller devices, the Product Bundles widget may not scale properly and appear squished for some users. To change the mobile appearance of the widget, follow these steps:

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select the Product Bundles app.

    Select Product Bundles 

  3. Select Display Settings.

    select display settings 

  4. Enter this code in the Custom CSS field.
    @media (max-width: 650px) { 
    .bundle-name {
    display: inline-block !important;
    }
    
    .bundle-equals {
    width: 100% !important;
    } 
    
    .bundle-title, .total-amount {
    text-align: center !important;
    } 
    
    .total-amount {
    display: block !important;
    margin-top: 10px !important;
    } 
    
    .bundle-name {
    padding-bottom: 10px !important;
    } 
    
    .product-bundle .product-wrapper a {
    margin-right: auto !important;
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    text-align: center;
    }
    
    .bundle-name {
    margin-top: 10px !important;
    }
    
    .bundle-plus {
    display: block !important;
    margin-top: -15px !important;
    margin-bottom: 25px !important;
    }
    
    #max-two {
    width: 100% !important;
    }
    
    .bundle-form select {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
    
    #reg_price_1, #bundle_price_1, #reg_price_2, #bundle_price_2, #reg_price_3, #bundle_price_3 {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    } 
    
    .bundle-total button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    }
    }

    enter the css 

  5. Select Save.

    select save 

That's it!