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 Settings, then Display.

    Select Settings/Display

  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;
    }
    }

    Custom CSS

  5. Select Save.

    Save CSS

That's it!

Next Steps:

Blog Posts: