Style your Hub while keeping Mobile accessibility in mind.
🧰 What You Will Need
At least one Hub section inside a 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. 📱
Step 2 - Style your Sections
In the image below, I have created a second Feature section that is simplified for Mobile viewing. This is helpful if using a banner image that fits well on Desktop but poorly on Mobile, you may wish to create a separate banner specifically for the Mobile screen. Creating an individual section for each will ensure the best compatibility.
Step 3 - Toggle Device Visibility
Set the Device Visibility for each section from the Styling options.
Scroll down to the Device Visibility section and select the desired device.
Setting 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
- Customize your Hub emails
- Share your Private Hub with your Audience