Hide blocks on specific devices in MaxiBlocks

Learn how to control block visibility across different devices in MaxiBlocks, a modern alternative to traditional page builders.

Understanding responsive design in MaxiBlocks

MaxiBlocks provides straightforward device-specific visibility controls that help optimise your site's performance and user experience across different screen sizes. This feature is particularly useful when you want to display different content layouts for desktop and mobile users.

Why hide blocks on certain devices?

• Performance optimisation: Prevent large images from loading on mobile devices
• Improved user experience: Show device-appropriate content
• Faster loading times: Reduce unnecessary resource loading
• Design flexibility: Create tailored experiences for each device type

Step-by-step guide to hiding blocks

1. Select your target block

Click on the block you want to control. This could be a hero section, image block, or any other MaxiBlocks element.

2. Navigate to advanced settings

Open the block settings sidebar and click on the Advanced tab. This section contains all the advanced customisation options for your selected block.

3. Locate Show/Hide block controls

Scroll down to find the Show/Hide block section. This area contains visibility toggles for different device breakpoints.

4. Configure visibility settings

Toggle the visibility switches for each breakpoint:

• XXL: Extra extra large screens
• XL: Extra large screens
• L: Large screens (desktops)
• M: Medium screens (tablets)
• S: Small screens (smartphones)
• XS: Extra small screens

5. Save and test your changes

After configuring visibility:

1. Update the page to save your changes
2. Clear all caches (browser cache, site cache, CDN cache)
3. Test in an incognito window to see the actual result without cached content

Practical example: Desktop-only hero section

For the example use case of showing a 1920px hero image only on desktop:

1. Select the hero section block
2. Go to Advanced → Show/Hide block
3. Keep L, XL, and XXL toggled to "Show"
4. Toggle S, XS, and optionally M to "Hide"

This configuration ensures the large hero image loads only on devices with sufficient screen space and bandwidth.

Additional tips for responsive design

Testing across devices

• Use browser developer tools to preview different screen sizes
• Test on real devices when possible
• Check both portrait and landscape orientations
• Verify functionality with touch interactions on mobile

Common use cases

Mobile-specific optimisations

• Hide complex animations that might lag on mobile processors
• Remove decorative elements that clutter small screens
• Simplify navigation menus for touch interfaces

Tablet considerations

• Adjust layouts for landscape vs portrait viewing
• Optimise for touch while maintaining desktop-like features
• Balance between mobile simplicity and desktop functionality

Troubleshooting visibility settings

Changes not appearing?

1. Cache clearing checklist:
   • Browser cache (Ctrl+Shift+R or Cmd+Shift+R)
   • WordPress cache plugins
   • Server-side caching
   • CDN cache (if applicable)
2. Verify breakpoint settings: Ensure you've toggled the correct breakpoints
3. Check CSS conflicts: Custom CSS might override visibility settings

SEO considerations

When hiding content:

• Ensure critical content remains accessible to search engines
• Use proper semantic HTML structure

Best practices summary

1. Plan your responsive strategy before building
2. Test thoroughly across all target devices
3. Monitor performance impacts of your choices
4. Document your visibility settings for future maintenance
5. Consider accessibility - ensure all users can access important content