Display Settings

Overview

The Display Settings panel in PodcasterPlus Blocks provides powerful controls for managing block visibility and positioning across different devices. This guide explains how to use display settings to create responsive layouts that adapt perfectly to desktop, tablet, and mobile screens.

Understanding Display Controls

Display settings consist of two main features:

Visibility Settings

• Show/Hide per device: Control block visibility on specific screen sizes
• Responsive design: Different layouts for different devices
• Performance: Hidden blocks don't render, improving page speed

Sticky Positioning

• Fixed positioning: Keep blocks visible while scrolling
• Smart offsets: Account for headers and navigation
• Z-index control: Manage stacking order
• Responsive stickiness: Different behavior per device

How Display Settings Work

Device Visibility

Each device can have independent visibility:

1. Desktop: Full visibility for large screens
2. Tablet: Adapted layout for medium devices
3. Mobile: Optimized display for small screens

Current Device Indicator

The panel highlights your currently selected device:

• Blue highlight: Shows active device
• (current) label: Additional visual indicator
• Toggle switches: Control visibility per device

Sticky Position Options

When enabled, sticky positioning offers:

• Position: Top, bottom, or inherit
• Offset: Distance from edge (px, em, rem, %)
• Z-index: Stacking order (0-9999)
• Boundaries: Parent or viewport container

Using the Display Panel

Basic Visibility Control

1. Open Display Settings: Click the Display panel
2. Review device list: See all three breakpoints
3. Toggle visibility: Switch devices on/off
4. Current device: Blue highlight shows active view
5. Preview changes: See results immediately

Sticky Positioning Setup

1. Enable sticky: Toggle "Enable Sticky Position"
2. Choose position: Top or bottom of viewport
3. Set offset: Distance from edge (e.g., "80px")
4. Configure z-index: Higher values stack on top
5. Test scrolling: Verify sticky behavior

Advanced Configuration

• Selective hiding: Hide on mobile, show on desktop
• Sticky headers: Fixed navigation bars
• Floating elements: Persistent CTAs
• Layered content: Z-index management

Best Practices

Mobile-First Visibility

• Start visible: Show content on all devices initially
• Hide selectively: Remove only when necessary
• Test thoroughly: Check all breakpoints
• Consider context: What mobile users need

Sticky Positioning Guidelines

• Account for headers: Add offset for fixed navigation
• Avoid overlap: Test with different content lengths
• Performance impact: Limit sticky elements
• Accessibility: Ensure keyboard navigation works

Performance Optimization

• Hide unnecessary: Don't just resize, actually hide
• Reduce DOM: Hidden blocks don't render
• Test load times: Especially on mobile
• Progressive enhancement: Core content always visible

Common Use Cases

Mobile Menu Toggle

Desktop: Hide mobile menu button
Tablet: Show condensed navigation
Mobile: Show menu toggle only

Sticky Call-to-Action

Position: Bottom
Offset: 20px (space from edge)
Z-index: 999 (above content)
Mobile: Smaller, simplified version

Responsive Sidebars

Desktop: Show full sidebar
Tablet: Show if space permits
Mobile: Hide sidebar completely

Floating Audio Player

Enable sticky: Yes
Position: Bottom
Offset: 0px (flush with edge)
Z-index: 1000 (above most content)

Troubleshooting

Visibility Not Working

Check these common issues:

1. Cache clearing: Browser and site caches
2. Correct device: Viewing at right breakpoint
3. CSS conflicts: Theme overrides
4. Preview mode: Some themes affect preview

Sticky Position Problems

Common sticky issues:

1. Parent overflow: Container must allow sticky
2. Height requirements: Element needs defined height
3. Z-index conflicts: Other elements overlapping
4. Browser support: Older browsers may not support

Inheritance Confusion

Understanding offset inheritance:

• Empty field shows inherited value as placeholder
• "Inheriting from" message indicates source
• Set explicit value to override
• Clear to restore inheritance

Performance Issues

If display settings cause lag:

• Limit sticky elements (1-2 max)
• Avoid complex sticky animations
• Test on real devices
• Monitor Core Web Vitals

Tips for Specific Scenarios

Header Navigation

Create responsive sticky headers:

1. Desktop: Full menu, subtle shadow
2. Tablet: Condensed menu, same sticky
3. Mobile: Hamburger only, reduced height

Promotional Banners

Device-specific promotions:

1. Desktop: Full width banner
2. Tablet: Compact version
3. Mobile: Hide or minimal version

Content Priority

Show most important content:

1. Mobile: Core content only
2. Tablet: Add supporting elements
3. Desktop: Full experience

Floating Elements

Persistent UI elements:

1. Chat widgets: Bottom-right, high z-index
2. Back-to-top: Bottom-right, appear on scroll
3. Audio players: Bottom, full width on mobile

Advanced Techniques

Breakpoint Strategy

Plan your breakpoints:

• Mobile: 320-767px
• Tablet: 768-1023px
• Desktop: 1024px+
• Test: Common device sizes

Z-index Management

Organize stacking layers:

• Background: 1-100
• Content: 100-500
• Sticky elements: 500-900
• Modals/overlays: 900-9999

Performance Patterns

Optimize for speed:

1. Conditional loading: Load only visible blocks
2. Lazy rendering: Defer hidden content
3. Smart defaults: Mobile-first approach
4. Progressive disclosure: Reveal as needed

Integration with Other Settings

With Layout

• Visibility affects layout flow
• Hidden blocks don't take space
• Plan responsive grid changes
• Test layout shifts

With Spacing

• Sticky positioning needs padding
• Account for offset spacing
• Margins affect sticky behavior
• Container boundaries matter

With Typography

• Adjust text size for visibility
• Consider readability at distance
• Sticky text needs contrast
• Test legibility while scrolling

Frequently Asked Questions

Q: Why isn't my block hiding on mobile?
A: Clear caches, check responsive preview is accurate, and verify no CSS overrides.

Q: Can I hide blocks for logged-in users only?
A: Display settings are device-based, not user-based. Use visibility plugins for user conditions.

Q: Why does sticky positioning break my layout?
A: Check parent container overflow settings and ensure proper height is set.

Q: How do I test different devices accurately?
A: Use browser dev tools, real devices, and online testing services.

Q: Can sticky elements overlap?
A: Yes, use z-index to control stacking order. Higher numbers appear on top.

Accessibility Considerations

Keyboard Navigation

• Sticky elements must remain keyboard accessible
• Tab order should make sense
• Skip links for sticky headers
• Focus indicators visible

Screen Readers

• Hidden blocks are not announced
• Use aria-labels for context
• Sticky elements need landmarks
• Test with screen readers

Motion Sensitivity

• Avoid parallax with sticky
• Reduce motion option support
• Smooth scroll considerations
• Performance on older devices

Getting Help

If you need assistance with Display Settings:

1. Review this guide for common solutions
2. Check browser console for errors
3. Visit our support forum
4. Contact support with specific examples

Remember: Display settings are powerful tools for creating responsive, performant websites. Use visibility controls to optimize for each device, and sticky positioning to enhance user experience.