Optimize your Hub sections for mobile
Style your Hub while keeping mobile accessibility in mind
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 left-hand side of the Hub Editor to get an idea of how your Hub will appear on Mobile devices. 📱
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.
Step 3 - Toggle Device Visibility
Set the Device Visibility for each section by clicking the ⚙️ setting icon for the element > Styling. From there, select the mobile phone icon, which means that section specifically will open on Mobile view.
Setting the Device Visibility will ensure that the sections are only visible on the device for which it was designed. 😎 Don't forget to hit 💾 !