Change the Mobile Appearance of Bold Bundles

Follow

On some smaller devices, the Bold Bundles widget may not scale properly and appear squished for some users.

To change the mobile appearance of the widget, please follow these steps:

  1. From Shopify's admin, select Apps.

    Select Apps

  2. Select Product Bundles.

    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:

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.