How to Control Widget Width with CSS

Control your widget’s width to create a perfectly balanced cart page layout.

The Bird Pickup & Delivery widget automatically adapts to your theme’s design, but sometimes you need precise control over its dimensions. This guide shows you how to restrict the widget’s width using custom CSS.

How to Restrict Widget Width

Step 1: Access Advanced Styling

1. Go to your Shopify Admin
2. Navigate to Apps > Bird Pickup & Delivery
3. Click Widget Design
4. Scroll to Advanced Styling

Step 2: Add Custom CSS

In the Advanced Styling section, add this CSS code:

#birdchime-slots-box {
    max-width: 400px;
}

Customize the width value (400px) to match your design needs.

Step 3: Save and Test

1. Click Save Changes
2. Refresh your cart page to see the updated widget width
3. Test on mobile and desktop to ensure the widget displays correctly

Mobile-Responsive Width Control

For better mobile experience, use responsive CSS:

#birdchime-slots-box {
    max-width: 400px;
    min-width: 300px;
    width: 100%;
}

Customize the width values to match your design needs.

Related Articles

• How to Customize Widget Design
• Can I customize the text and appearance of my widget?
• How to Add Custom Links Below Your Widget