Layout

Layout settings control where your popup appears, how big it is, and how content is organized within it.

Popup Position

Position Grid

XBuilder uses a 9-point position grid:

┌─────┬─────┬─────┐
│ TL  │ TC  │ TR  │
├─────┼─────┼─────┤
│ ML  │ MC  │ MR  │
├─────┼─────┼─────┤
│ BL  │ BC  │ BR  │
└─────┴─────┴─────┘

Position	Code	Use Case
Top Left	TL	Notifications
Top Center	TC	Announcements
Top Right	TR	Alerts
Middle Left	ML	Sidebars
Middle Center	MC	Main popups (default)
Middle Right	MR	Sidebars
Bottom Left	BL	Chat widgets
Bottom Center	BC	Cookie bars
Bottom Right	BR	Slide-ins

Setting Position

1. Go to Layout tab
2. Click desired position in grid
3. Popup moves to selected position

Popup Size

Width Settings

Option	Description
Auto	Content-based width
Fixed	Specific pixel value
Percentage	% of viewport
Min/Max	Constraints

Common widths:

Small: 300-400px
Medium: 450-550px
Large: 600-700px
Wide: 800px+

Height Settings

Option	Description
Auto	Content-based (recommended)
Fixed	Specific pixel value
Max Height	Scroll when exceeded
Viewport %	% of screen height

Responsive Sizing

Set different sizes per device:

Desktop: 500px width
Tablet: 90% width
Mobile: 100% width

Offset & Margins

Edge Offset

Distance from viewport edges:

Top: 20px
Right: 20px
Bottom: 20px
Left: 20px

Useful for:

• Avoiding fixed headers
• Creating breathing room
• Positioning near edges

Position Offset

Fine-tune position from grid point:

X Offset: 10px (horizontal)
Y Offset: 10px (vertical)

Content Layout

Content Alignment

Align content within popup:

Alignment	Effect
Top	Content at top
Center	Content centered
Bottom	Content at bottom

Content Padding

Inner spacing around content:

Padding: 32px (all sides)

Or individual sides:

Top: 40px
Right: 32px
Bottom: 32px
Left: 32px

Overlay Settings

Overlay Background

The dimmed background behind popup:

Option	Description
Color	Solid color
Opacity	Transparency level
Blur	Backdrop blur effect
None	No overlay

Common settings:

Color: #000000
Opacity: 50%

Click Outside to Close

Enable/disable closing popup by clicking overlay.

Close Button

Position

Where the X button appears:

Position	Description
Inside Top Right	Within popup (common)
Outside Top Right	Outside popup bounds
Inside Top Left	Left-side close
None	No close button

Styling

Setting	Options
Size	Small, medium, large
Color	Icon color
Background	Button background
Border Radius	Rounded corners

Show/Hide

• Always visible
• Hidden (use other close methods)
• Show on hover

Fullscreen Options

Full Width

Make popup span full viewport width:

Width: 100%

Commonly used with:

• Top/bottom positions
• Floating bars
• Mobile layouts

Full Height

Make popup span full viewport height:

Height: 100vh

Used for:

• Sidebar layouts
• Fullscreen takeovers
• Mobile menus

Z-Index

Control stacking order:

Z-Index: 10000 (default)

Increase if popup appears behind other elements.

Responsive Layout

Desktop Layout

Typical desktop settings:

Position: Center
Width: 500px
Padding: 40px

Tablet Layout

Adjusted for tablets:

Position: Center
Width: 90%
Max-Width: 500px
Padding: 32px

Mobile Layout

Optimized for phones:

Position: Center or Bottom
Width: 100%
Padding: 24px
Border Radius: Top only (if bottom position)

Common Layout Patterns

Centered Modal

Position: Middle Center
Width: 480px
Padding: 40px
Border Radius: 16px

Bottom Sheet (Mobile)

Position: Bottom Center
Width: 100%
Border Radius: 16px 16px 0 0
Padding: 24px

Slide-in Panel

Position: Middle Right
Width: 400px
Height: 100%
Border Radius: 0

Floating Bar

Position: Top Center
Width: 100%
Height: Auto
Padding: 16px

Layout Tips

Centering

For perfect centering:

• Use Middle Center position
• Auto width or fixed
• No offsets

Mobile-First

Design for mobile, then expand:

1. Start with mobile layout
2. Add tablet adjustments
3. Add desktop enhancements

Consistent Spacing

Use multiples of 8:

8, 16, 24, 32, 40, 48, 56, 64

Test at Extremes

Check your layout at:

• Minimum content
• Maximum content
• All device sizes
• With/without scrolling

Troubleshooting

Popup too wide/narrow:

• Check width settings
• Verify responsive values
• Look for min/max constraints

Position incorrect:

• Verify position setting
• Check for offsets
• Test without custom CSS

Content overflow:

• Add max-height with scroll
• Increase popup size
• Reduce content