Optimize your Hub sections for mobile

Style your Hub while keeping mobile accessibility in mind

🧰 What You Will Need

At least one Hub section inside your Hub

 

Membership.io is designed to be responsive so in most cases, your Hub will appear fine on both Desktop and Mobile. That said, switching to "Mobile"x preview in the Hub editor will give you a good idea if you need to adjust any custom elements or images you may have in your Hub. 🤓

Step 1 - Select Mobile Preview in the Hub Editor

Click on the Mobile preview button in the top right of the Hub Editor to get an idea of how your Hub will appear on Mobile devices. 📱

Toggle mobile preview

Step 2 - Style your Sections

You can switch between desktop and mobile previews to see how your design appears. Then, modify the styling of each section to ensure screen compatibility.

Desktop vs mobile view 2

Step 3 - Toggle Device Visibility

Set the Device Visibility for each section from Settings > Visibility. In the example below, we've set the visibility to "Mobile", which means the Welcome Section specifically will open on Mobile view.

Set device visibilitySetting the Device Visibility will ensure that the sections are only visible on the device it was designed for. 😎 Don't forget to hit 💾 !

 

📚 Up Next